Element Hooks

外观

useTable ​

useTable 使用 columns 数组定义表格列。setColumns 用于更新表格列，setData 用于更新表格数据。Table 组件支持 ElTable 原有的属性、插槽和事件。

columns 配置适合列较多或需要动态调整列的表格。

基础表格 ​

带斑马纹表格 ​

带边框表格 ​

带状态表格 ​

显示溢出工具提示的表格 ​

固定表头 ​

固定列 ​

固定列和表头 ​

流体高度 ​

多级表头 ​

固定表头 ​

单选 ​

多选 ​

排序 ​

筛选 ​

自定义列模板 ​

自定义表头 ​

展开行 ​

switch parent border:
switch child border:
preserve expanded:

树形数据与懒加载 ​

可选择的树形数据 ​

表尾合计行 ​

合并行或列 ​

自定义索引 ​

表格布局 ​

Tooltip 自定义 ​

API ​

useTable 支持 ElTable 的属性，并增加以下配置。

  • columns — 用于声明表格列的 TableColumn<T>[]。
  • data — 表格数据 T[]。

TableColumn ​

属性与 ElTableColumn 一致，并增加以下配置。

字段说明类型
key表格列的唯一标识string | number
slot默认插槽名（slots.default 的简写）string
slots具名插槽配置（default、header、filterIcon 和 expand）Partial<Record<TableColumnSlotName, string>>
children子列配置（用于多级表头）TableColumn<T>[]
render渲染组件配置RenderOptions<T>

render.component ​

render.component 可以使用全局组件名称，例如 tag 可以映射到 ElTag。

render.props ​

render.props 可以是属性对象，也可以是返回属性对象的函数。函数参数是当前行数据 row，组件会在渲染时执行该函数。函数中使用的响应式数据变化后，组件属性会自动更新。

事件、格式化器等函数属性会直接传给组件。

ts
import { useTable } from 'element-hooks';
import { ElTag } from 'element-plus';

const [Table] = useTable({
  columns: [
    {
      prop: 'gender',
      label: '性别',
      render: {
        component: ElTag,
        props: row => ({
          // row 为当前行的数据
          type: row.gender === '男' ? 'primary' : 'danger',
        }),
      },
    },
  ],
});

slot ​

slot 是 slots.default 的简写形式。当同一个列同时定义了 slot 和 render 时，插槽优先。

Controller ​

成员说明类型
setState更新表格整体配置(state: TableOptions<T> | ((prev: TableOptions<T>) => TableOptions<T>)) => void
setColumns更新列定义(columns: TableColumn<T>[] | ((prev: TableColumn<T>[]) => TableColumn<T>[])) => void
getColumns获取当前列定义() => TableColumn<T>[]
setData更新表格数据(data: T[] | ((prev: T[]) => T[])) => void
loadData执行一次同步或异步数据加载(loader: TableDataLoader<T>) => void | Promise<void>
getData获取当前数据() => T[]
instanceElTable 组件实例Ref<TableInstance | null>

loadData 会调用传入的加载函数，并使用返回结果更新表格数据。加载函数返回 PromiseLike（包括 Promise）时会显示 v-loading。错误会继续向调用方抛出。加载函数结束后，v-loading 会自动关闭。需要串行加载时，调用方应逐次 await loadData(...)。

T 必须满足 object 约束。未提供具体行类型时默认使用 object，空数组不会将行类型固定为 never。需要访问行数据字段时，应传入泛型或使用带有明确类型的数组。