useExTable

useExTable 是一个进阶扩展 Hook，通过统一的声明式配置组合 ElTable、ElForm 与 ElPagination。

它适用于中后台列表页场景，可在同一配置入口下完成表格展示、条件检索与分页联动，减少页面样板代码并提升可维护性。

基础用法

配置 columns、data 以及 pagination 即可生成带分页的表格。

• 1
• 2

<script setup lang="ts">
  import { useExTable } from 'element-hooks';

  const [ExTable] = useExTable({
    data: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
    columns: [
      { prop: 'date', label: 'Date', width: '180' },
      { prop: 'name', label: 'Name', width: '180' },
      { prop: 'address', label: 'Address' },
    ],
    pagination: {
      currentPage: 1,
      pageSize: 2,
      layout: 'prev, pager, next',
    },
  });
</script>

<template>
  <ExTable />
</template>

搜索表单

通过 form 配置项，可以快速集成搜索表单。

Approved by

Activity zone

Activity zone

• 1

<script setup lang="ts">
  import { useExTable } from 'element-hooks';
  import { ElInput, ElSelect } from 'element-plus';

  const [ExTable, controller] = useExTable({
    form: {
      model: { user: '', region: '' },
      inline: true,
      items: [
        {
          label: 'Approved by',
          prop: 'user',
          render: {
            component: ElInput,
            props: {
              placeholder: 'Approved by',
              style: '--el-input-width: 190px',
            },
          },
        },
        {
          label: 'Activity zone',
          prop: 'region',
          render: {
            component: ElSelect,
            props: {
              placeholder: 'Activity zone',
              options: [
                { label: 'Zone one', value: 'shanghai' },
                { label: 'Zone two', value: 'beijing' },
              ],
              style: '--el-select-width: 190px',
            },
          },
        },
        {
          slot: 'operations',
        },
      ],
    },
    data: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
    columns: [
      { prop: 'date', label: 'Date', width: '180' },
      { prop: 'name', label: 'Name', width: '180' },
      { prop: 'address', label: 'Address' },
    ],
    pagination: {
      currentPage: 1,
      pageSize: 10,
      layout: 'prev, pager, next',
    },
  });

  const onSearch = () => {
    console.log('search!', controller.getModel());
  };

  const onReset = () => {
    controller.instance.value?.form?.resetFields();
  };
</script>

<template>
  <ExTable>
    <template #operations>
      <el-button type="primary" @click="onSearch">Query</el-button>
      <el-button @click="onReset">Reset</el-button>
    </template>
  </ExTable>
</template>

自定义数据映射

当后端返回的数据结构不是默认的 { result: [], total: 0 } 时，可以通过 pagination.props 进行映射。

• 1
• 2
• 3
• 4
• 5
• 6
• 20

<script setup lang="ts">
  import { useExTable } from 'element-hooks';

  const [ExTable] = useExTable({
    data: {
      records: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],
      count: 200,
    },
    columns: [
      { prop: 'date', label: 'Date', width: '180' },
      { prop: 'name', label: 'Name', width: '180' },
      { prop: 'address', label: 'Address' },
    ],
    pagination: {
      currentPage: 1,
      pageSize: 10,
      layout: 'prev, pager, next',
      props: {
        result: 'records',
        total: 'count',
      },
    },
  });
</script>

<template>
  <ExTable />
</template>

API

Options

参数	说明	类型	默认值
data	表格数据，可以是数组或包含结果及总数的对象	T[] | Recordable	-
columns	表格列配置	TableColumn<T>[]	[]
form	表单配置项，参考 useForm 的 options	FormOptions	-
pagination	分页配置项，参数参考 ElPagination 的 props	PaginationOptions	-

Controller

方法	说明	参数
setState	更新 ExTable 的整体状态	(state: Partial<ExTableOptions>) => void
setData	更新表格数据	(data: ExTableData) => void
setModel	更新表单模型数据	(model: Recordable) => void
getModel	获取当前的表单数据	() => Recordable
setItems	更新表单项配置	(items: FormItem[]) => void
setColumns	更新表格列配置	(columns: TableColumn[]) => void
getData	获取当前表格渲染的数组数据	() => T[]
getCurrentPage	获取当前页码	() => number