下拉表格组件

组件库参考 demo

https://wocwin.github.io/t-ui-plus/components/TSelectTable/base.html#%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A6%96%E5%88%97%E5%8D%95%E9%80%89

代码示例:

import BdSelectTable from '@bdsoft/select-table'

<bd-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></bd-select-table>

配置参数（Attributes）继承 el-table 及 el-select 属性

参数 说明 类型 默认值 v-model 绑定值 boolean / string / number 仅显示 table 表格数据对象 Object {} ---data 展示下拉数据源 Array [] ---total 数据总条数 Number - ---pageSize 每页显示条目个数 Number - ---currentPage 当前页数 Number - columns 表头信息 Array [] ----bind el-table-column Attributes Object - ----noShowTip 是否换行 （设置：noShowTip:true） Boolean false ----fixed 列是否固定( left, right) string, boolean - ----align 对齐方式(left/center/right) String center ----render 返回三个参数(text：当前值,row：当前整条数据 ,index：当前行) function - ----slotName 插槽显示此列数据（其值是具名作用域插槽） String - ------scope 具名插槽获取此行数据必须用解构接收 Object 当前行数据 keywords 关键字配置（value-key 配置） Object 无 ------label 选项的标签 String ‘label’ ------value 选项的值 String ‘value’ radioTxt 单选文案 String 单选 multiple 是否开启多选 Boolean false rowClickRadio 是否开启整行选中(单选) boolean true isShowFirstColumn 是否显示首列(单选) boolean true defaultSelectVal 设置第一页默认选中项--keywords.value 值（单选是 String, Number 类型；多选时是数组） Number / string / Array - filterable 是否开启过滤(根据 keywords 的 label 值进行过滤) Boolean true reserveSelection 是否支持翻页选中 Boolean true isShowPagination 开启分页 Boolean false tableWidth table 宽度 Number 550 isKeyup 单选是否开启键盘事件 Boolean false isShowQuery 是否允许配置查询条件(继承TQueryCondition的所有属性、事件、插槽) Boolean false

事件（events）继承 el-table 及 el-select 属性

事件名 说明 回调参数 page-change 页码改变事件(避免与el-table的current-change事件冲突) 返回选中的页码 selectionChange 多选事件 返回选中的项数据及选中项的 keywords.value 集合 radioChange 单选 返回当前项所有数据

方法（Methods）继承 el-table 及 el-select 属性

方法名 说明 回调参数 clear 清空选中项 focus 使 input 获取焦点 blur 使 input 失去焦点，并隐藏下拉框

测试数据

 table.value = {
    datas: [
      { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
      { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
      { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
      { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
      { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
      { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
      { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
      { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
      { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' }
    ],
    columns: [
      { label: '物料编号', width: '100px', prop: 'code' },
      { label: '物料名称', width: '149px', prop: 'name' },
      { label: '规格', width: '149px', prop: 'spec' },
      { label: '单位', width: '110px', prop: 'unitName' },
      { label: '物料编号1', width: '149px', prop: 'code' },
      { label: '物料名称1', width: '149px', prop: 'name' },
      { label: '规格1', width: '149px', prop: 'spec' },
      { label: '单位1', width: '110px', prop: 'unitName' }
    ]
  }