feat(table): add table component

src/views/demo/comp/verify/index.vue

@@ -25,7 +25,7 @@
 
     <div class="flex justify-center p-4 items-center bg-gray-700">
       <BasicDragVerify ref="el4" @success="handleSuccess">
-        <template v-slot:actionIcon="isPassing">
+        <template #actionIcon="isPassing">
           <BugOutlined v-if="isPassing" />
           <RightOutlined v-else />
         </template>
@@ -35,7 +35,7 @@
 
     <div class="flex justify-center p-4 items-center bg-gray-700">
       <BasicDragVerify ref="el5" @success="handleSuccess">
-        <template v-slot:text="isPassing">
+        <template #text="isPassing">
           <div v-if="isPassing">
             <BugOutlined />
             成功

src/views/demo/table/Basic.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="p-4">
+    <BasicTable
+      title="基础示例"
+      titleHelpMessage="温馨提醒"
+      :columns="columns"
+      :dataSource="data"
+      :canResize="canResize"
+      :loading="loading"
+      :striped="striped"
+      :bordered="border"
+      :pagination="{ pageSize: 20 }"
+    >
+      <template #toolbar>
+        <a-button type="primary" @click="toggleCanResize">
+          {{ !canResize ? '自适应高度' : '取消自适应' }}
+        </a-button>
+        <a-button type="primary" @click="toggleBorder">
+          {{ !border ? '显示边框' : '隐藏边框' }}
+        </a-button>
+        <a-button type="primary" @click="toggleLoading"> 开启loading </a-button>
+        <a-button type="primary" @click="toggleStriped">
+          {{ !striped ? '显示斑马纹' : '隐藏斑马纹' }}
+        </a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { getBasicColumns, getBasicData } from './tableData';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const canResize = ref(false);
+      const loading = ref(false);
+      const striped = ref(true);
+      const border = ref(true);
+      function toggleCanResize() {
+        canResize.value = !canResize.value;
+      }
+      function toggleStriped() {
+        striped.value = !striped.value;
+      }
+      function toggleLoading() {
+        loading.value = true;
+        setTimeout(() => {
+          loading.value = false;
+        }, 3000);
+      }
+      function toggleBorder() {
+        border.value = !border.value;
+      }
+      return {
+        columns: getBasicColumns(),
+        data: getBasicData(),
+        canResize,
+        loading,
+        striped,
+        border,
+        toggleStriped,
+        toggleCanResize,
+        toggleLoading,
+        toggleBorder,
+      };
+    },
+  });
+</script>

src/views/demo/table/CustomerCell.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #id="{ record }"> ID: {{ record.id }} </template>
+      <template #no="{ record }"
+        ><Tag color="green">{{ record.no }}</Tag>
+      </template>
+      <template #img>
+        <TableImg
+          :imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
+        />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
+  import { Tag } from 'ant-design-vue';
+  import { demoListApi } from '/@/api/demo/table';
+  const columns: BasicColumn[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      slots: { customRender: 'id' },
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '头像',
+      dataIndex: 'img',
+      width: 120,
+      slots: { customRender: 'img' },
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      slots: { customRender: 'no' },
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+    },
+  ];
+  export default defineComponent({
+    components: { BasicTable, TableImg, Tag },
+    setup() {
+      const [registerTable] = useTable({
+        title: '自定义列内容',
+        api: demoListApi,
+        columns: columns,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/EditCellTable.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #customId>
+        <EditTableHeaderIcon title="Id" />
+      </template>
+      <template #customName>
+        <EditTableHeaderIcon title="姓名" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    renderEditableCell,
+    EditTableHeaderIcon,
+  } from '/@/components/Table';
+
+  import { demoListApi } from '/@/api/demo/table';
+  const columns: BasicColumn[] = [
+    {
+      // title: 'ID',
+      dataIndex: 'id',
+      slots: { title: 'customId' },
+      customRender: renderEditableCell({ dataIndex: 'id' }),
+    },
+    {
+      // title: '姓名',
+      dataIndex: 'name',
+      slots: { title: 'customName' },
+      customRender: renderEditableCell({
+        dataIndex: 'name',
+      }),
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      sorter: true,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicTable, EditTableHeaderIcon },
+    setup() {
+      const [registerTable] = useTable({
+        title: '可编辑单元格示例',
+        api: demoListApi,
+        columns: columns,
+        showIndexColumn: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/ExpandTable.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #expandedRowRender="{ record }">
+        <span>No: {{ record.no }} </span>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getBasicColumns } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        title: '可展开表格',
+        api: demoListApi,
+        titleHelpMessage: '不能与scroll共用',
+        columns: getBasicColumns(),
+        rowKey: 'id',
+        canResize: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/FetchTable.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
+        <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getBasicColumns } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable, { reload }] = useTable({
+        title: '远程加载示例',
+        api: demoListApi,
+        columns: getBasicColumns(),
+      });
+      function handleReloadCurrent() {
+        reload();
+        // reload({
+        //   searchInfo: 'xxx',
+        // });
+      }
+
+      function handleReload() {
+        reload({
+          page: 1,
+        });
+      }
+      return {
+        registerTable,
+        handleReloadCurrent,
+        handleReload,
+      };
+    },
+  });
+</script>

src/views/demo/table/FixedColumn.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #action>
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              props: {
+                onClick: handleDelete,
+              },
+            },
+          ]"
+          :dropDownActions="[
+            {
+              label: '启用',
+              props: {
+                onClick: handleOpen,
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+
+  import { demoListApi } from '/@/api/demo/table';
+  const columns: BasicColumn[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      fixed: 'left',
+      width: 280,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 260,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      width: 260,
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 300,
+    },
+    {
+      title: '开始时间',
+      width: 200,
+      dataIndex: 'beginTime',
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 200,
+    },
+  ];
+  export default defineComponent({
+    components: { BasicTable, TableAction },
+    setup() {
+      const [registerTable] = useTable({
+        title: 'TableAction组件及固定列示例',
+        api: demoListApi,
+        columns: columns,
+        rowSelection: { type: 'radio' },
+        actionColumn: {
+          width: 160,
+          title: 'Action',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+        },
+      });
+      function handleDelete() {
+        console.log('点击了删除');
+      }
+      function handleOpen() {
+        console.log('点击了启用');
+      }
+      return {
+        registerTable,
+        handleDelete,
+        handleOpen,
+      };
+    },
+  });
+</script>

src/views/demo/table/FixedHeight.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <template #customTitle>
+        <span>
+          姓名
+          <BaseHelp class="ml-2" text="姓名" />
+        </span>
+      </template>
+      <template #customAddress>
+        地址
+        <FormOutlined class="ml-2" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getCustomHeaderColumns } from './tableData';
+  import { FormOutlined } from '@ant-design/icons-vue';
+  import { demoListApi } from '/@/api/demo/table';
+
+  export default defineComponent({
+    components: { BasicTable, FormOutlined },
+    setup() {
+      const [registerTable] = useTable({
+        title: '定高/头部自定义',
+        api: demoListApi,
+        columns: getCustomHeaderColumns(),
+        canResize: false,
+        scroll: { y: 100 },
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/FooterTable.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getBasicColumns } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      function handleSummary(tableData: any[]) {
+        const totalNo = tableData.reduce((prev, next) => {
+          prev += next.no;
+          return prev;
+        }, 0);
+        return [
+          {
+            _row: '合计',
+            _index: '平均值',
+            no: totalNo,
+          },
+          {
+            _row: '合计',
+            _index: '平均值',
+            no: totalNo,
+          },
+        ];
+      }
+      const [registerTable] = useTable({
+        title: '表尾行合计示例',
+        api: demoListApi,
+        rowSelection: { type: 'checkbox' },
+        columns: getBasicColumns(),
+        showSummary: true,
+        summaryFunc: handleSummary,
+        scroll: { x: 2000 },
+        canResize: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/FormTable.vue

@@ -0,0 +1,27 @@
+<template>
+  <BasicTable @register="registerTable" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getBasicColumns, getFormConfig } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        title: '开启搜索区域',
+        api: demoListApi,
+        columns: getBasicColumns(),
+        useSearchForm: true,
+        formConfig: getFormConfig(),
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/MergeHeader.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getMergeHeaderColumns } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        title: '多级表头示例',
+        api: demoListApi,
+        columns: getMergeHeaderColumns(),
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/MultipleHeader.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getMultipleHeaderColumns } from './tableData';
+
+  import { demoListApi } from '/@/api/demo/table';
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        title: '多级表头示例',
+        api: demoListApi,
+        columns: getMultipleHeaderColumns(),
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

src/views/demo/table/RefTable.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="p-4">
+    <div class="mb-4">
+      <a-button class="mr-2" @click="reloadTable">还原</a-button>
+      <a-button class="mr-2" @click="changeLoading">开启loading</a-button>
+      <a-button class="mr-2" @click="changeColumns">更改Columns</a-button>
+      <a-button class="mr-2" @click="getColumn">获取Columns</a-button>
+      <a-button class="mr-2" @click="getTableData">获取表格数据</a-button>
+      <a-button class="mr-2" @click="setPaginationInfo">跳转到第2页</a-button>
+    </div>
+    <div class="mb-4">
+      <a-button class="mr-2" @click="getSelectRowList">获取选中行</a-button>
+      <a-button class="mr-2" @click="getSelectRowKeyList">获取选中行Key</a-button>
+      <a-button class="mr-2" @click="setSelectedRowKeyList">设置选中行</a-button>
+      <a-button class="mr-2" @click="clearSelect">清空选中行</a-button>
+      <a-button class="mr-2" @click="getPagination">获取分页信息</a-button>
+    </div>
+    <BasicTable
+      :canResize="false"
+      title="RefTable示例"
+      titleHelpMessage="使用Ref调用表格内方法"
+      ref="tableRef"
+      :api="api"
+      :columns="columns"
+      rowKey="id"
+      :rowSelection="{ type: 'checkbox' }"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { BasicTable, TableActionType } from '/@/components/Table';
+  import { getBasicColumns, getBasicShortColumns } from './tableData';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { demoListApi } from '/@/api/demo/table';
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const tableRef = ref<Nullable<TableActionType>>(null);
+      const { createMessage } = useMessage();
+
+      function getTableAction() {
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
+      }
+      function changeLoading() {
+        getTableAction().setLoading(true);
+        setTimeout(() => {
+          getTableAction().setLoading(false);
+        }, 1000);
+      }
+      function changeColumns() {
+        getTableAction().setColumns(getBasicShortColumns());
+      }
+      function reloadTable() {
+        getTableAction().setColumns(getBasicColumns());
+
+        getTableAction().reload({
+          page: 1,
+        });
+      }
+      function getColumn() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getColumns());
+      }
+
+      function getTableData() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getDataSource());
+      }
+
+      function getPagination() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getPaginationRef());
+      }
+
+      function setPaginationInfo() {
+        getTableAction().setPagination({
+          current: 2,
+        });
+        getTableAction().reload();
+      }
+      function getSelectRowList() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getSelectRows());
+      }
+      function getSelectRowKeyList() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getSelectRowKeys());
+      }
+      function setSelectedRowKeyList() {
+        getTableAction().setSelectedRowKeys(['0', '1', '2']);
+      }
+      function clearSelect() {
+        getTableAction().clearSelectedRowKeys();
+      }
+
+      return {
+        tableRef,
+        api: demoListApi,
+        columns: getBasicColumns(),
+        changeLoading,
+        changeColumns,
+        reloadTable,
+        getColumn,
+        getTableData,
+        getPagination,
+        setPaginationInfo,
+        getSelectRowList,
+        getSelectRowKeyList,
+        setSelectedRowKeyList,
+        clearSelect,
+      };
+    },
+  });
+</script>

src/views/demo/table/TreeTable.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-4">
+    <BasicTable
+      :rowSelection="{ type: 'checkbox' }"
+      :isTreeTable="true"
+      title="树形表格"
+      titleHelpMessage="树形组件不能和序列号列同时存在"
+      :columns="columns"
+      :dataSource="data"
+      rowKey="id"
+      :indentSize="20"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable } from '/@/components/Table';
+  import { getBasicColumns, getTreeTableData } from './tableData';
+
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      return {
+        columns: getBasicColumns(),
+        data: getTreeTableData(),
+      };
+    },
+  });
+</script>

src/views/demo/table/UseTable.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="p-4">
+    <div class="mb-4">
+      <a-button class="mr-2" @click="reloadTable">还原</a-button>
+      <a-button class="mr-2" @click="changeLoading">开启loading</a-button>
+      <a-button class="mr-2" @click="changeColumns">更改Columns</a-button>
+      <a-button class="mr-2" @click="getColumn">获取Columns</a-button>
+      <a-button class="mr-2" @click="getTableData">获取表格数据</a-button>
+      <a-button class="mr-2" @click="setPaginationInfo">跳转到第2页</a-button>
+    </div>
+    <div class="mb-4">
+      <a-button class="mr-2" @click="getSelectRowList">获取选中行</a-button>
+      <a-button class="mr-2" @click="getSelectRowKeyList">获取选中行Key</a-button>
+      <a-button class="mr-2" @click="setSelectedRowKeyList">设置选中行</a-button>
+      <a-button class="mr-2" @click="clearSelect">清空选中行</a-button>
+      <a-button class="mr-2" @click="getPagination">获取分页信息</a-button>
+    </div>
+    <BasicTable @register="registerTable" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getBasicColumns, getBasicShortColumns } from './tableData';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { demoListApi } from '/@/api/demo/table';
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const { createMessage } = useMessage();
+      const [
+        registerTable,
+        {
+          setLoading,
+          setColumns,
+          getColumns,
+          getDataSource,
+          reload,
+          getPaginationRef,
+          setPagination,
+          getSelectRows,
+          getSelectRowKeys,
+          setSelectedRowKeys,
+          clearSelectedRowKeys,
+        },
+      ] = useTable({
+        canResize: false,
+        title: 'useTable示例',
+        titleHelpMessage: '使用useTable调用表格内方法',
+        api: demoListApi,
+        columns: getBasicColumns(),
+        rowKey: 'id',
+        rowSelection: {
+          type: 'checkbox',
+        },
+      });
+
+      function changeLoading() {
+        setLoading(true);
+        setTimeout(() => {
+          setLoading(false);
+        }, 1000);
+      }
+      function changeColumns() {
+        setColumns(getBasicShortColumns());
+      }
+      function reloadTable() {
+        setColumns(getBasicColumns());
+
+        reload({
+          page: 1,
+        });
+      }
+      function getColumn() {
+        createMessage.info('请在控制台查看！');
+        console.log(getColumns());
+      }
+
+      function getTableData() {
+        createMessage.info('请在控制台查看！');
+        console.log(getDataSource());
+      }
+
+      function getPagination() {
+        createMessage.info('请在控制台查看！');
+        console.log(getPaginationRef());
+      }
+
+      function setPaginationInfo() {
+        setPagination({
+          current: 2,
+        });
+        reload();
+      }
+      function getSelectRowList() {
+        createMessage.info('请在控制台查看！');
+        console.log(getSelectRows());
+      }
+      function getSelectRowKeyList() {
+        createMessage.info('请在控制台查看！');
+        console.log(getSelectRowKeys());
+      }
+      function setSelectedRowKeyList() {
+        setSelectedRowKeys(['0', '1', '2']);
+      }
+      function clearSelect() {
+        clearSelectedRowKeys();
+      }
+
+      return {
+        registerTable,
+        changeLoading,
+        changeColumns,
+        reloadTable,
+        getColumn,
+        getTableData,
+        getPagination,
+        setPaginationInfo,
+        getSelectRowList,
+        getSelectRowKeyList,
+        setSelectedRowKeyList,
+        clearSelect,
+      };
+    },
+  });
+</script>

src/views/demo/table/tableData.tsx

@@ -0,0 +1,292 @@
+import { FormProps, FormSchema } from '/@/components/Table';
+import { BasicColumn } from '/@/components/Table/src/types/table';
+
+export function getBasicColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      width: 150,
+      dataIndex: 'id',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 80,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+    },
+    {
+      title: '结束时间',
+      sorter: true,
+      dataIndex: 'endTime',
+    },
+  ];
+}
+
+export function getBasicShortColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      width: 150,
+      dataIndex: 'id',
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 80,
+    },
+  ];
+}
+
+export function getMultipleHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 200,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      sorter: true,
+      children: [
+        {
+          title: '编号',
+          dataIndex: 'no',
+          width: 120,
+          filters: [
+            { text: 'Male', value: 'male' },
+            { text: 'Female', value: 'female' },
+          ],
+        },
+
+        {
+          title: '开始时间',
+          dataIndex: 'beginTime',
+          width: 120,
+        },
+        {
+          title: '结束时间',
+          dataIndex: 'endTime',
+          width: 120,
+        },
+      ],
+    },
+  ];
+}
+
+export function getCustomHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 200,
+    },
+    {
+      // title: '姓名',
+      dataIndex: 'name',
+      width: 120,
+      slots: { title: 'customTitle' },
+    },
+    {
+      // title: '地址',
+      dataIndex: 'address',
+      slots: { title: 'customAddress' },
+      sorter: true,
+    },
+
+    {
+      title: '编号',
+      dataIndex: 'no',
+      width: 120,
+      filters: [
+        { text: 'Male', value: 'male' },
+        { text: 'Female', value: 'female' },
+      ],
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+      width: 120,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 120,
+    },
+  ];
+}
+const renderContent = ({ text, index }: { text: any; index: number }) => {
+  const obj: any = {
+    children: text,
+    attrs: {},
+  };
+  if (index === 9) {
+    obj.attrs.colSpan = 0;
+  }
+  return obj;
+};
+export function getMergeHeaderColumns(): BasicColumn[] {
+  return [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      width: 300,
+      customRender: renderContent,
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: 300,
+      customRender: renderContent,
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      colSpan: 2,
+      width: 120,
+      sorter: true,
+      customRender: ({ text, index }: { text: any; index: number }) => {
+        const obj: any = {
+          children: text,
+          attrs: {},
+        };
+        if (index === 2) {
+          obj.attrs.rowSpan = 2;
+        }
+        if (index === 3) {
+          obj.attrs.colSpan = 0;
+        }
+        return obj;
+      },
+    },
+    {
+      title: '编号',
+      dataIndex: 'no',
+      colSpan: 0,
+      filters: [
+        { text: 'Male', value: 'male' },
+        { text: 'Female', value: 'female' },
+      ],
+      customRender: renderContent,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'beginTime',
+      width: 200,
+      customRender: renderContent,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      width: 200,
+      customRender: renderContent,
+    },
+  ];
+}
+export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => {
+  const arr: any = [];
+  for (let index = 0; index < itemNumber; index++) {
+    arr.push({
+      field: `field${index}`,
+      label: `字段${index}`,
+      component: 'Input',
+      colProps: {
+        xl: 12,
+        xxl: 8,
+      },
+    });
+  }
+  return arr;
+};
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: getAdvanceSchema(6),
+  };
+}
+export function getBasicData() {
+  const data: any = (() => {
+    const arr: any = [];
+    for (let index = 0; index < 40; index++) {
+      arr.push({
+        id: `${index}`,
+        name: 'John Brown',
+        age: `1${index}`,
+        no: `${index + 10}`,
+        address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+        beginTime: new Date().toLocaleString(),
+        endTime: new Date().toLocaleString(),
+      });
+    }
+    return arr;
+  })();
+  return data;
+}
+
+export function getTreeTableData() {
+  const data: any = (() => {
+    const arr: any = [];
+    for (let index = 0; index < 40; index++) {
+      arr.push({
+        id: `${index}`,
+        name: 'John Brown',
+        age: `1${index}`,
+        no: `${index + 10}`,
+        address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+        beginTime: new Date().toLocaleString(),
+        endTime: new Date().toLocaleString(),
+        children: [
+          {
+            id: `l2-${index}`,
+            name: 'John Brown',
+            age: `1${index}`,
+            no: `${index + 10}`,
+            address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+            beginTime: new Date().toLocaleString(),
+            endTime: new Date().toLocaleString(),
+            children: [
+              {
+                id: `l3-${index}`,
+                name: 'John Brown',
+                age: `1${index}`,
+                no: `${index + 10}`,
+                address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
+                beginTime: new Date().toLocaleString(),
+                endTime: new Date().toLocaleString(),
+              },
+            ],
+          },
+        ],
+      });
+    }
+    return arr;
+  })();
+
+  return data;
+}