一. 引入

import { defineComponent, ref, unref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { getBasicColumns, getBasicData } from './tableData';

二. 注册

export default defineComponent({
    components: { BasicTable },
    setup() {
      return {};
    },
  });

三. 常用配置

const [registerTable, { setTableData, getDataSource }] = useTable({
      api: dutyPage, // 请求接口
      columns: classInfo, // 表格头部
      dataSource, // 表格数据
      searchInfo: {}, // 请求携带的参数
      useSearchForm: false, // 开启搜索表单
      clickToRowSelect: false, // 点击行是否选中 checkbox 或者 radio。需要开启
      showTableSetting: false, //控制刷新，密度，列设置按钮的显示
      bordered: true, // 是否显示表格边框
      canResize: true, // 是否可以自适应高度
      clearSelectOnPageChange: true, // 切换页码是否重置勾选状态
      showIndexColumn: false, // 是否显示序号列
      maxHeight: 400, // 表格最大高度，超出会显示滚动条
      actionColumn: { // 表格右侧操作列配置 BasicColumn
        width: 200,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      rowSelection: { // 选择列配置
          type: 'checkbox',
        onChange: changeUser,
      },
      beforeFetch: (res) => { // 请求之前对参数进行处理
        console.log(res,'beforeFetch res')
        return res;
      },
      afterFetch: (res) => { // 请求之后对返回值进行处理
        console.log(res,'afterFetch res')
      },
    });

四. 常用方法

Table 内部方法及 table 参数配置可以直接注册到useTable内部

const [register, methods] = useTable(props);
const [registerTable, { setTableData, getDataSource, ... }] = useTable()

1. 设置表格参数：setProps

   类型：(props: Partial<BasicTableProps>) => void

2. 刷新表格：reload

   类型：(opt?: FetchParams) => Promise<void>

3. 设置表格 loading 状态：setLoading

   类型：(loading: boolean) => void

4. 获取表格数据：getDataSource

   类型：<T = Recordable>() => T[]

5. 获取表头数据：getColumns

   类型：(opt?: GetColumnsParams) => BasicColumn[]

6. 设置表头数据：setColumns

   类型：(columns: BasicColumn[] | string[]) => void

7. 设置表格数据：setTableData

   类型：<T = Recordable>(values: T[]) => void

8. 设置分页信息：setPagination

   类型：(info: Partial<PaginationProps>) => void

9. 清空选中行：clearSelectedRowKeys

   类型：() => void

10. 获取勾选框信息：getRowSelection

    类型：() => TableRowSelection<Recordable>

11. 更新表格数据：updateTableData

    类型：(index: number, key: string, value: any)=>void

五. 常用插槽

六. 案例

<template>
  <div>
    <BasicTable @register="registerTable" :align="left">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">下载模板</a-button>
        <a-button type="primary" @click="authorization">导入人员</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看',
              tooltip: '查看设备资料',
              onClick: handleShow.bind(null, record),
            },
            {
              label: '编辑',
              tooltip: '编辑设备资料',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              tooltip: '删除此数据',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <OperateDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, dataSource, searchFormSchema } from './index';
  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
    },
    setup() {
      // 设备表格
      const [registerTable] = useTable({
        // api: a,
        columns,
        dataSource,
        formConfig: {
          labelWidth: 80,
          labelAlign: 'right',
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        canResize: false,
        bordered: false,
        showIndexColumn: true,
        // searchInfo: {},
        actionColumn: {
          width: 220,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });


      return {
        registerTable,
      };
    },
  });
</script>
<style scoped>
</style>