外观
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
