Skip to content

TableSelector ​

表格选择器,可传入列表数据接口和查询条件进行筛选然后跨页选择,支持多选和单选,支持禁用某一行,支持本地数据分页。

如需弹窗中显示可直接使用ModalSelector组件。

使用方法 ​

在 columns 中设置某一行的 type 属性为 selection 即可开启多选

多选
显示代码
单选
显示代码

本组件可视为:ProTable + ProSearchForm + useTableSelection 的组合,也可参考自行在 ProTable 中配置

自行实现
显示代码

参数列表 ​

参数名类型描述是否必填默认值
search-fieldsSearchField[]搜索表单配置否-
serviceUseTableListService列表数据接口是-
dataRecord<string, any>[]列表数据,如果存在 service 则忽略 data,不存在 service 时 data 进行本地分页否-
columnsColumnsTypeTable组件columns属性是-
row-keystringTable组件rowKey属性否'id'
name-keystring多选时会展示选中的标签用来删除,展示的字段 key否'name'
type'checkbox' | 'radio'单选或多选否'checkbox'
set-row-disabledFunction设置行不可选否-
model-valueRecord<string, any> | Record<string, any>[]已选中的值否-
highlight-current-rowboolean开启单选否-
...anyProTable/ElTable 的所有其他属性否-

Events ​

事件名称回调参数描述
update:modelValueRecord<string, any> | Record<string, any>[]更改v-model绑定的值
changeRecord<string, any> | Record<string, any>[]触发change事件,返回选中数据