Skip to content

Table 表格

Table组件基于el-table封装而来,基本其所有属性均会支持。 可以使用defineTableColumns来获取具有类型提示的定义列表

基础用法

slot 插槽

表格组件默认会根据prop值创建一个插槽名称;或者可以使用slotKey自定义插槽名称。 自定义插槽名称优先级高于prop,果没有则默认名称为prop的值

嵌入表单

useFormValidationtrue,开启表单校验,同时需要配置rules然后通过插槽使用表单组件即可。

注意:data需要配置响应式,否则可能校验不会生效

多选

类型typeselection,开启表单校验。清空选中状态调用clearSelection方法

增删改查

可以通过设置typeoperation进行配置操作列表按钮,默认会自动设置增删改查操作按钮,如果只需要其中某个操作,只需要设置operationType,接收一个数组。如:['add'] 则只会渲染新增操作按钮。如果这些都不符合你的需求,可以通过配置slotKey进行插槽自定义操作, 更多设置,请查看配置项

自定义操作按钮

设置operationType,接收一个数组,类型为OperationTypeMap。 可以自定义操作的相关设置,同时也可以处理权限类操心,设置permission属性,接收一个数组或者一个返回boolean的方法。
tyoe值非常规操作的情况下(add,edit,delete, view),事件回调请使用click-btn。 此外,如果你需要非按钮类相关操作,请使用render属性,具体请查看OperationTypeMap配置项

请记住,插槽的优先级永远最高,其次为自定义相关!!!

多列表头

使用render,返回一个节点,类型ElTableColumn

渲染树形数据

用法与element-plus用法一致。
注意:需要设置row-id

集成分页组件

用法与pagination组件一致。

  1. 需要pagination设置为true开启分页组件,默认为false
  2. 预设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,同时需要启用highlightCurrentRowtrue