• 更新说明
• bl-from
  • bl-from Attributes
  • form-template
  • picker-options
  • option-prop
  • bl-from 事件
  • bl-from 方法
• bl-button
  • bl-button Attributes
  • config-obj
• bl-title
  • bl-title Attributes
• bl-search-card
  • bl-search-card Attributes
  • other-btn-list
  • bl-search-card 事件
  • bl-search-card 方法
  • bl-search-card 参数
• bl-dialog
  • bl-dialog Attributes
  • bl-dialog 事件
  • bl-dialog 方法
• container
• bl-svg-icon
  • bl-svg-icon Attributes
• bl-preview-pdf
  • bl-preview-pdf Attributes
  • bl-preview-pdf 方法
• bl-pagination
  • bl-pagination Attributes
  • bl-pagination 事件
• export
  • 导出xlsx
  • 导出csv
  • 导出txt
• bl-tables
  • bl-tables 属性
  • bl-tables tableColumn Attributes
  • bl-tables Methods

更新说明

v1.0.19 修改消息弹窗样式 v1.0.20 表单组件入参增加picker-options v1.0.21 弹窗组件入参增加modal-append-to-body、append-to-body v1.0.22 搜索栏组件增加表单校验方法 v1.0.23 表单组件选择框label和value的key值可自定义 v1.0.24 bug修复 v1.0.25 添加focus、blur、change事件，表单组件添加textarea v1.1.2 表单组件添加移除检验结果、重置事件恢复默认值、输入框添加保留两位小数功能、添加pdf预览组件 v1.1.9 README.md修改 v1.1.10 修复隐藏表单的重置bug v1.1.11 修改pdf预览组件 v1.1.16 修改bug v1.1.17 表单选择框增加多选 v1.1.22 表单选择框增加全选框 v1.1.23 表单组件添加级联选择器 v1.1.29 下拉框添加筛选功能filterable v1.1.30 表单组件添加clearable v1.2.1 添加导出excel、csv、txt 方法 v1.2.14 打印模糊问题 v1.2.16 表单添加form-inline参数，控制是否横竖向显示 v1.2.20 form-template添加display参数，控制表单项是否显示 v1.2.22 弹出框bug修复 v1.2.40 pdf预览，若未查询，点击点击按钮提示请先查询 v1.2.49 表单项为级联时，监听change事件,增加返回选中的node

bl-from

自定义表单组件

bl-from Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- label-width | 表单域标签的宽度 | string | — | 130px form-template | 需要渲染的模板表单 | array | — | — form-data | 需要渲染的模板表单 | Object | — | — form-rules | 需要渲染的模板表单 | Object | — | — form-append | 是否展开 | Boolean | — | true form-shownum | 收起时显示的个数，默认显示所有 | Number | — | — form-inline | 行内表单模式 | boolean | — | true

form-template

参数 | 说明 | 类型 | 可选值 | 默认值 ---- |-------------------------------------------------------------------|------------------------------------------| ---- | ---- label | 表单标签 | string | — | — size | 表单元素大小 | number | — | — prop | 表单标签key | string | — | — type | 表单元素类型 | string | select / cascader / number / input / range / textarea / checkbox / radio / date / week / month / year / datetime / timerange(时间区间) / monthrange(月区间) / daterange(日期区间) / datetimerange(日期时间区间)/ ta-number(数字输入框) | input options | 当表单元素类型为select时的选项列表 | Array | — | — disabled | 表单元素是否为禁用 | boolean | — | false isFullReturn | 当表单元素类型为select时,是否完整返回对象 | boolean | — | false valueFormat | 当表单元素日期选择器时 | string | — | — icons | 当表单元素为input时 | Array | code、idcard、search | — placeholder | 输入框占位文本 | string | — keyEnter | 是否触发回车搜索事件 | boolean | false pickerOptions | 当前时间日期选择器特有的选项参考picker-options表 | object | — optionProp | 选择框下拉项配置 | object | — maxlength | 当表单元素为textarea时设置最大长度 | number | - isFocus | 是否监听选中事件 | boolean | - isBlur | 是否监听失去焦点事件 | boolean | - isChange | 是否监听change事件 | boolean | - isDecimals | 输入框是否保留两位小数 | boolean | - isMultiple | select是否多选 | boolean | - isAllCheck | select是否加全选,默认开启多选模式 | boolean | - checked | 全选标识,isAllCheck为true时，checked必须存在 | boolean | - | false isIndeterminate | 半选标识,checkbox类型，isAllCheck为true时 | boolean | - | false defaultTime | 选中默认时间 | Array | - showAllLevels | 级联输入框中是否显示选中值的完整路径 | boolean | - cascaderProps | 级联选项框配置参考Props表 | object | - filterable | 是否过滤 | boolean | false clearable | 是否清除 | boolean | true range-separator | 区间中间文字 | string | '至' start-placeholder | 区间第一个输入框占位文本 | string | - end-placeholder | 区间第二个输入框占位文本 | string | - prefix-icon | 区间输入框首部图标<element图标库可选> | string | - prepend | 输入框前置内容 | string | - append | 输入框后置内容 | string | - isPrefix | 显示选择框搜索 | boolean | - | false display | 是否隐藏 | boolean | - | false taProp | 特殊级联框占位prop | string | - | - fieldNames | 特殊级联框自定义 options 中 label name children 的字段 | object | - | - asAmount | ta-number类型设置为金额数字框，每三位用逗号隔开 | boolean | - | false alignRight | ta-number类型数字居右显示 | boolean | - | false max | ta-number类型最大值 | number | - | - min | ta-number类型最小值 | number | - | - decimalSeparator | ta-number类型小数点 | string | - | - precision | ta-number类型数值精度 | number | - | - step | ta-number类型每次改变步数，可以为小数 | number |string | - | 1 formatter | ta-number类型指定输入框展示值的格式 | function(value: number / string): string | - | - parser | ta-number类型指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - | - codeType | 字典对应编码 | string | - | - initValue | 表单初始值 | any | - | - filterArr | 搭配codeType使用,不显示的字典值数组，例:['01','02'] | array | - | - isReverse | 搭配filterArr使用,是否反向过滤，默认否 | boolean | - | false

picker-options

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 element | Object[] | — | — disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — cellClassName | 设置日期的 className | Function(Date) | — | — firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 onPick | 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效 | Function({ maxDate, minDate }) | — | —

option-prop

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- label | 选项的标签 | — | — | label value | 选项的标签 | — | — | value

bl-from 事件

事件名称 | 说明 | 回调参数 ---- | ---- | ---- suffixClick | 输入框icon点击事件 | icon keyEnter | 输入框回车事件，表单参数中keyEnter为true时生效 | prop focus | 监听选中事件 | prop blur | 监听失去焦点事件 | prop change | 监听change事件,当输入框类型为级联时返回选中的node | {prop,node}

bl-from 方法

方法名 | 说明 | 参数 ---- | ---- | ---- getValidateResult | 获取校验结果 | — clearValidate | 移除表单项的校验结果 | 表单prop 属性或者 prop 组成的数组 array、string clearFields | 重置表单 | —

bl-button

按钮组件

bl-button Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- config-obj | 按钮配置参数 | object | — | —

config-obj

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- type | 按钮类型 | string | primary / success / warning / error / info / text | — size | 按钮尺寸 | string | medium / small / mini | small loading | 按钮是否加载中状态 | boolean | — | false disabled | 按钮是否禁用状态 | boolean | — | false icon | 图标类名 | string | — | — wait | 点击后按钮等待时间（单位ms） | number | — | 1000

bl-title

标题组件

bl-title Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- title | 标题文本 | string | — | — append | 是否显示展开图标 | boolean | — | false defaultAppend | 默认是否展开 | boolean | — | true

bl-title 事件

事件名称 | 说明 | 回调参数 ---- | ---- | ---- changeAppend | 展开切换事件 | isAppend:当前展开收起的状态

bl-search-card

搜索栏组件

bl-search-card Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | --- title | 搜索栏标题(默认不显示) | string | — | — append | 是否可收起 | boolean | — | — showNum | 搜索栏收起时显示的输入框数量(append为true时生效) | number | — | — other-btn-list | 除展开、重置、查询按钮外的按钮列表 | Array | — | — 表单属性同自定义表单组件

other-btn-list

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- name | 按钮名称 | string | — | — config | 按钮配置,属性同config-obj | Object | — | — fun | 按钮函数 | string | — | —

bl-search-card 事件

事件名称 | 说明 | 回调参数 ---- | ---- | ---- resetSearch | 重置 | — search | 搜索 | — btnClick | 按钮点击事件，返回函数名称，传入other-btn-list时生效 | fun keyEnter | 输入框回车事件，表单参数中keyEnter为true时生效 | prop suffixClick | 输入框icon点击事件 | icon change | 监听表单变化 | prop

bl-search-card 方法

方法名 | 说明 | 参数 ---- | ---- | ---- getValidateResult | 获取校验结果 | — clearFields | 清空表单内容 | — clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string)

bl-search-card 参数

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- formAppend | 表单是否展开 | boolean | — | —

bl-dialog

弹窗组件

bl-dialog Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | - width | 弹窗的宽度 | string | — | 50% top | 弹窗CSS 中的 margin-top 值 | string | — | 10vh showClose | 是否显示关闭按钮 | boolean | — | false destroyOnClose | 关闭时销毁 Dialog 中的元素 | boolean | — | true modal-append-to-body | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false

bl-dialog 事件

事件名称 | 说明 | 回调参数 ---- | ---- | ---- beforeClose | 关闭弹窗前调用的方法 | -

bl-dialog 方法

方法名 | 说明 | 参数 ---- | ---- | ---- open | 打开弹窗 | (title)接收一个string类型的参数：弹窗标题 close | 关闭弹窗 | -

container

布局容器

标签名 | 说明 ---- | ---- search-page-container | 外层容器 search-page-result | 搜索结果容器 result-header | 搜索结果容器头部 result-handle-btnbar | 搜索结果容器头部按钮栏

bl-svg-icon

图标组件

bl-svg-icon Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | --- icon-class | 图标名称 | string | — | — class-name | 图标样式 | 详见class-name 列表 | — | — ###class-name 参数 | 说明 | ---- | ---- | code | 条形码 idcard | 身份证 search | 搜索

bl-preview-pdf

pdf预览

bl-preview-pdf Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | --- pdf-url | pdf地址 | string | — | — is-downLoad | 是否显示下载按钮 | boolean | - | - is-scale | 是否缩放按钮 | boolean | - | - is-show | 是否显示工具栏 | boolean | - | true init-scale | 自定义初始化缩放大小 | number | - | 1 print-direction | 打印默认方向 | string | portrait(纵向)/landscape(横向) | - download-options | 下载类型选项 | Array | - | EXCEL/PDF

bl-preview-pdf 方法

方法名 | 说明 | 参数 ---- | ---- | ---- onPrevPage | 上一页 | - onNextPage | 下一页 | - printPdf | 打印 | - scaleBig | 放大 | - scaleSmall | 缩小 | -

bl-pagination

分页组件

bl-pagination Attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | --- current | 当前页数 | number | — | — pageList | 每页显示个数选择器的选项设置 | number[] | — | [20, 50, 100] pageSize | 每页显示条目个数 | number | — | — total | 总条目数 | number | — | — disabled | 是否禁用 | boolean | — | false

bl-pagination 事件

方法名 | 说明 | 参数 ---- | ---- | ---- handleCurrent | current 改变时会触发 | 当前页 handleSize | pageSize 改变时会触发 | 每页条数

export

文件导出方法

导出xlsx

this.$export.excel({
  columns,
  data
})
  .then(() => {
    // ...可选回调
  })

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- | columns | 列 | Array | - | 空数组 data | 行数据 | Array | - | 空数组 title | 文件名 | String | - | table header | 第一行文字 | String | - | null merges | 要合并的单元格 | String | - | 空数组 合并单元格，根据 Excel 的表达方式，从第一行第一个单元格，到第一行第三个单元格：merges: ['A1', 'A3']， 多个合并区域，用二维数组表示：merges: [['A1', 'B1'], ['A2', B2]]，单元格从A1到B1、从A2到B2，分别进行合并。 示例:

const columns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  }
]
const data = [
  {
    name: 'lucy',
    age: 24
  },
  {
    name: 'bob',
    age: 26
  }
]
this.$export.excel({
  columns,
  data,
  header: 'Excel 第一行标题',
  merges: ['A1', 'A2']
})

导出csv

this.$export.csv({
  columns,
  data
})
  .then(() => {
    // ...可选回调
  })

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- | columns | 列 | Array | - | 空数组 data | 行数据 | Array | - | 空数组 title | 文件名 | String | - | table noHeader | 不导出表头 | Boolean | - | false separator | 数据分隔符 | String | - | , quoted | 每项数据是否加引号 | Boolean | - | false

const columns = [
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '年龄',
    prop: 'age'
  }
]
const data = [
  {
    name: 'lucy',
    age: 24
  },
  {
    name: 'bob',
    age: 26
  }
]
this.$export.csv({
  columns,
  data
})

导出txt

this.$export.txt({
  text: '文本内容',
  title: '文件名'
})
  .then(() => {
    // ...可选回调
  })

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- | text | 文件内容 | String | - | 空 title | 文件名 | String | - | 文本

bl-tables

bl-tables-attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- | current | 当前页数 | number | — | — pageList | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 50] pageSize | 每页显示条目个数 | number | — | — total | 总条目数 | number | — | — offsetBottom | 距离底部的距离 | number | — | 0 stripe | 是否为斑马纹 table | boolean | — | false selection | 是否多选 | boolean | — | false loading | 表格loading | boolean | — | false loadingText | 表格加载文字 | string | — | - indexFixed | 序号固定 | string, boolean | true, left, right | - currentRowKey | 行数据的 Key，用来优化 Table 的渲染 | string, number | - | - paginationShow | 是否需要分页 | boolean | - | false tableColumn | 表格列 | array | - | [] selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - showHead | 头部展示 | boolean | - | - title | 头部title | string | - | - buttonName | 头部按钮名字 | string | - | - fileName | 导出文件名 | string | - | table span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | - | -

bl-tables-table-column-attributes

参数 | 说明 | 类型 | 可选值 | 默认值 ---- | ---- | ---- | ---- | ---- | type | 对应列的类型 selection 多选框/index 该行的索引（从 1 开始计算）/expand 显示为一个可展开的按钮,slot插槽显示 | String | - | 空 columnKey | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | String | - | 文本 label | 显示的标题 | String | - |- prop | 对应列内容的字段名 | String | - |- width | 对应列的宽度 | String | - |- minWidth | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | String | - | fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string,boolean | true, left, right |- sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, String |true, false, 'custom' |false showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | - | false align | 对齐方式 | String | left/center/right |left headerAlign | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | - className| 列的 className | String | - | - operation | 操作栏 | Array | - | collectionType | 使用字典API对值进行解析，如 collectionType: 'sex' | String | - | - slot | 插槽名 | String | - | format | 时间格式 | String | - | YYYY-MM-DD HH:mm:ss dataSources | 数据源 dic:字典值，custom:自定义 | string | - | options | 自定义数据源，数据源为custom时需要传入 | Array | - | - formatter | 用来格式化内容 | Function(row, column, cellValue, index) | - | -

bl-tables-methods

方法名 | 说明 | 参数 ---- | ---- | ---- rowClick | 当某一行被点击时会触发该事件 | row, column, event handleCurrent | current 改变时会触发 | 当前页 handleSize | pageSize 改变时会触发 | 每页条数 rowOperation | 操作按钮点击触发 | row, $index, prop, columIndex, optionIndex (row.loading,row.disabled) switchChange | 开关切换 | row, $index, prop, columIndex editInputBlur | 可编辑input失去焦点 | row, $index, prop, columIndex selectChange | 当选择项发生变化时会触发该事件 | selection handleExport | 导出数据 | 传入data，不传则导出当前的数据 getData | 获取数据 | 设置了dataUrl和searchData时可以使用