外观
Table 表格
Table组件基于el-table
封装而来,基本其所有属性均会支持。 可以使用defineTableColumns
来获取具有类型提示的定义列表
基础用法
slot 插槽
表格组件默认会根据prop
值创建一个插槽名称;或者可以使用slotKey
自定义插槽名称。 自定义插槽名称优先级高于prop,果没有则默认名称为prop的值
嵌入表单
useFormValidation
为true
,开启表单校验,同时需要配置rules
然后通过插槽使用表单组件即可。
注意:data需要配置响应式,否则可能校验不会生效
多选
类型type
为selection
,开启表单校验。清空选中状态调用clearSelection
方法
增删改查
可以通过设置type
为operation
进行配置操作列表按钮,默认会自动设置增删改查操作按钮,如果只需要其中某个操作,只需要设置operationType
,接收一个数组。如:['add'] 则只会渲染新增操作按钮。如果这些都不符合你的需求,可以通过配置slotKey
进行插槽自定义操作, 更多设置,请查看配置项
自定义操作按钮
设置operationType
,接收一个数组,类型为OperationTypeMap
。 可以自定义操作的相关设置,同时也可以处理权限类操心,设置permission
属性,接收一个数组
或者一个返回boolean
的方法。 tyoe
值非常规操作的情况下(add,edit,delete, view),事件回调请使用click-btn
。 此外,如果你需要非按钮类相关操作,请使用render
属性,具体请查看OperationTypeMap
配置项
请记住,插槽的优先级永远最高,其次为自定义相关!!!
多列表头
使用render
,返回一个节点,类型ElTableColumn
。
渲染树形数据
用法与element-plus
用法一致。
注意:需要设置row-id
集成分页组件
用法与pagination
组件一致。
- 需要
pagination
设置为true
开启分页组件,默认为false
- 预设
total
,page
,limit
,pageSizes
属性,其他属性请配置paExtra
**注意:集成的分页组件需要设置`pa-`开头,如total需要配置`pa-total`**
动态操作列
可以使用useEpTable
来简化ref
操作
目前支持的操作方法与ref
操作方法一致:
validateField
表单校验某字段validate
表单检验clearValidate
清除检验状态resetFields
重置表单toggleRowSelection
选中与否,可以通过单个/多组数据进行选中与否,支持对象、数字、字符串clearSelection
清空选中状态addFieldColumns
添加列,支持批量,支持根据prop
添加到指定位置,默认尾部添加deleteFieldColumns
根据prop
删除列,支持批量updateFieldColumns
根据prop
更新列,支持批量
注意:toggleRowSelection方法中,数字、字符串(数组)情况下需要配置row-key唯一键, 同时ref中仅支持单行数据操作(暂定)
单选
需要配置idKey
唯一值的key,同时需要启用highlightCurrentRow
为true