refactor: table重构

src/components/Table/index.ts

@@ -1,14 +1,14 @@
-export { default as BasicTable } from './src/BasicTable.vue'
-export { default as TableAction } from './src/components/TableAction.vue'
-export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue'
-export { default as TableImg } from './src/components/TableImg.vue'
+export { default as BasicTable } from './src/BasicTable.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export { default as EditTableHeaderIcon } from './src/components/EditTableHeaderIcon.vue';
+export { default as TableImg } from './src/components/TableImg.vue';
 
-export * from './src/types/table'
-export * from './src/types/pagination'
-export * from './src/types/tableAction'
+export * from './src/types/table';
+export * from './src/types/pagination';
+export * from './src/types/tableAction';
 
-export { useTable } from './src/hooks/useTable'
+export { useTable } from './src/hooks/useTable';
 
-export type { FormSchema, FormProps } from '/@/components/Form/src/types/form'
+export type { FormSchema, FormProps } from '/@/components/Form/src/types/form';
 
-export type { EditRecordRow } from './src/components/editable'
+export type { EditRecordRow } from './src/components/editable';

src/components/Table/src/BasicTable.vue

@@ -33,38 +33,38 @@
   </div>
 </template>
 <script lang="ts">
-  import type { BasicTableProps, TableActionType, SizeType } from './types/table'
-
-  import { defineComponent, ref, computed, unref } from 'vue'
-  import { Table } from 'ant-design-vue'
-  import { BasicForm, useForm } from '/@/components/Form/index'
-  import expandIcon from './components/ExpandIcon'
-  import HeaderCell from './components/HeaderCell.vue'
-
-  import { usePagination } from './hooks/usePagination'
-  import { useColumns } from './hooks/useColumns'
-  import { useDataSource } from './hooks/useDataSource'
-  import { useLoading } from './hooks/useLoading'
-  import { useRowSelection } from './hooks/useRowSelection'
-  import { useTableScroll } from './hooks/useTableScroll'
-  import { useCustomRow } from './hooks/useCustomRow'
-  import { useTableStyle } from './hooks/useTableStyle'
-  import { useTableHeader } from './hooks/useTableHeader'
-  import { useTableExpand } from './hooks/useTableExpand'
-  import { createTableContext } from './hooks/useTableContext'
-  import { useTableFooter } from './hooks/useTableFooter'
-  import { useTableForm } from './hooks/useTableForm'
-  import { useExpose } from '/@/hooks/core/useExpose'
-  import { useDesign } from '/@/hooks/web/useDesign'
-
-  import { omit } from 'lodash-es'
-  import { basicProps } from './props'
+  import type { BasicTableProps, TableActionType, SizeType } from './types/table';
+
+  import { defineComponent, ref, computed, unref, toRaw } from 'vue';
+  import { Table } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import expandIcon from './components/ExpandIcon';
+  import HeaderCell from './components/HeaderCell.vue';
+
+  import { usePagination } from './hooks/usePagination';
+  import { useColumns } from './hooks/useColumns';
+  import { useDataSource } from './hooks/useDataSource';
+  import { useLoading } from './hooks/useLoading';
+  import { useRowSelection } from './hooks/useRowSelection';
+  import { useTableScroll } from './hooks/useTableScroll';
+  import { useCustomRow } from './hooks/useCustomRow';
+  import { useTableStyle } from './hooks/useTableStyle';
+  import { useTableHeader } from './hooks/useTableHeader';
+  import { useTableExpand } from './hooks/useTableExpand';
+  import { createTableContext } from './hooks/useTableContext';
+  import { useTableFooter } from './hooks/useTableFooter';
+  import { useTableForm } from './hooks/useTableForm';
+  import { useExpose } from '/@/hooks/core/useExpose';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  import { omit } from 'lodash-es';
+  import { basicProps } from './props';
 
   export default defineComponent({
     components: {
       Table,
       BasicForm,
-      HeaderCell
+      HeaderCell,
     },
     props: basicProps,
     emits: [
@@ -81,30 +81,30 @@
       'edit-cancel',
       'edit-row-end',
       'edit-change',
-      'expanded-rows-change'
+      'expanded-rows-change',
     ],
     setup(props, { attrs, emit, slots }) {
-      const tableElRef = ref<ComponentRef>(null)
-      const tableData = ref<Recordable[]>([])
+      const tableElRef = ref<ComponentRef>(null);
+      const tableData = ref<Recordable[]>([]);
 
-      const wrapRef = ref<Nullable<HTMLDivElement>>(null)
-      const innerPropsRef = ref<Partial<BasicTableProps>>()
+      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const innerPropsRef = ref<Partial<BasicTableProps>>();
 
-      const { prefixCls } = useDesign('basic-table')
-      const [registerForm, formActions] = useForm()
+      const { prefixCls } = useDesign('basic-table');
+      const [registerForm, formActions] = useForm();
 
       const getProps = computed(() => {
-        return { ...props, ...unref(innerPropsRef) } as BasicTableProps
-      })
+        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+      });
 
-      const { getLoading, setLoading } = useLoading(getProps)
+      const { getLoading, setLoading } = useLoading(getProps);
       const {
         getPaginationInfo,
         getPagination,
         setPagination,
         setShowPagination,
-        getShowPagination
-      } = usePagination(getProps)
+        getShowPagination,
+      } = usePagination(getProps);
 
       const {
         getRowSelection,
@@ -113,8 +113,8 @@
         clearSelectedRowKeys,
         getSelectRowKeys,
         deleteSelectRowByKey,
-        setSelectedRowKeys
-      } = useRowSelection(getProps, tableData, emit)
+        setSelectedRowKeys,
+      } = useRowSelection(getProps, tableData, emit);
 
       const {
         handleTableChange,
@@ -125,7 +125,7 @@
         getRowKey,
         reload,
         getAutoCreateKey,
-        updateTableData
+        updateTableData,
       } = useDataSource(
         getProps,
         {
@@ -134,10 +134,10 @@
           setLoading,
           setPagination,
           getFieldsValue: formActions.getFieldsValue,
-          clearSelectedRowKeys
+          clearSelectedRowKeys,
         },
         emit
-      )
+      );
 
       const {
         getViewColumns,
@@ -145,8 +145,8 @@
         setCacheColumnsByField,
         setColumns,
         getColumnsRef,
-        getCacheColumns
-      } = useColumns(getProps, getPaginationInfo)
+        getCacheColumns,
+      } = useColumns(getProps, getPaginationInfo);
 
       const { getScrollRef, redoHeight } = useTableScroll(
         getProps,
@@ -154,39 +154,41 @@
         getColumnsRef,
         getRowSelectionRef,
         getDataSourceRef
-      )
+      );
 
       const { customRow } = useCustomRow(getProps, {
         setSelectedRowKeys,
         getSelectRowKeys,
         clearSelectedRowKeys,
         getAutoCreateKey,
-        emit
-      })
+        emit,
+      });
 
-      const { getRowClassName } = useTableStyle(getProps, prefixCls)
+      const { getRowClassName } = useTableStyle(getProps, prefixCls);
 
-      const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit)
+      const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);
 
-      const { getHeaderProps } = useTableHeader(getProps, slots)
+      const { getHeaderProps } = useTableHeader(getProps, slots);
 
       const { getFooterProps } = useTableFooter(
         getProps,
         getScrollRef,
         tableElRef,
         getDataSourceRef
-      )
+      );
 
       const {
         getFormProps,
         replaceFormSlotKey,
         getFormSlotKeys,
-        handleSearchInfoChange
-      } = useTableForm(getProps, slots, fetch)
+        handleSearchInfoChange,
+      } = useTableForm(getProps, slots, fetch);
 
       const getBindValues = computed(() => {
+        const dataSource = toRaw(unref(getDataSourceRef));
         let propsData: Recordable = {
           size: 'middle',
+          // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
           ...attrs,
           customRow,
           expandIcon: expandIcon(),
@@ -197,43 +199,42 @@
           tableLayout: 'fixed',
           rowSelection: unref(getRowSelectionRef),
           rowKey: unref(getRowKey),
-          columns: unref(getViewColumns),
-          pagination: unref(getPaginationInfo),
-          dataSource: unref(getDataSourceRef),
+          columns: toRaw(unref(getViewColumns)),
+          pagination: toRaw(unref(getPaginationInfo)),
+          dataSource,
           footer: unref(getFooterProps),
-          ...unref(getExpandOption)
-        }
+          ...unref(getExpandOption),
+        };
         if (slots.expandedRowRender) {
-          propsData = omit(propsData, 'scroll')
+          propsData = omit(propsData, 'scroll');
         }
 
-        propsData = omit(propsData, 'class')
-
-        return propsData
-      })
+        propsData = omit(propsData, 'class');
+        return propsData;
+      });
 
       const getWrapperClass = computed(() => {
-        const values = unref(getBindValues)
+        const values = unref(getBindValues);
         return [
           prefixCls,
           attrs.class,
           {
             [`${prefixCls}-form-container`]: values.useSearchForm,
-            [`${prefixCls}--inset`]: values.inset
-          }
-        ]
-      })
+            [`${prefixCls}--inset`]: values.inset,
+          },
+        ];
+      });
 
       const getEmptyDataIsShowTable = computed(() => {
-        const { emptyDataIsShowTable, useSearchForm } = unref(getProps)
+        const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
         if (emptyDataIsShowTable || !useSearchForm) {
-          return true
+          return true;
         }
-        return !!unref(getDataSourceRef).length
-      })
+        return !!unref(getDataSourceRef).length;
+      });
 
       function setProps(props: Partial<BasicTableProps>) {
-        innerPropsRef.value = { ...unref(innerPropsRef), ...props }
+        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
       }
 
       const tableAction: TableActionType = {
@@ -262,14 +263,14 @@
         expandAll,
         collapseAll,
         getSize: () => {
-          return unref(getBindValues).size as SizeType
-        }
-      }
-      createTableContext({ ...tableAction, wrapRef, getBindValues })
+          return unref(getBindValues).size as SizeType;
+        },
+      };
+      createTableContext({ ...tableAction, wrapRef, getBindValues });
 
-      useExpose<TableActionType>(tableAction)
+      useExpose<TableActionType>(tableAction);
 
-      emit('register', tableAction, formActions)
+      emit('register', tableAction, formActions);
 
       return {
         tableElRef,
@@ -287,10 +288,10 @@
         replaceFormSlotKey,
         getFormSlotKeys,
         getWrapperClass,
-        columns: getViewColumns
-      }
-    }
-  })
+        columns: getViewColumns,
+      };
+    },
+  });
 </script>
 <style lang="less">
   @border-color: #cecece4d;

src/components/Table/src/componentMap.ts

@@ -1,26 +1,26 @@
-import type { Component } from 'vue'
+import type { Component } from 'vue';
 
-import { Input, Select, Checkbox, InputNumber, Switch } from 'ant-design-vue'
+import { Input, Select, Checkbox, InputNumber, Switch } from 'ant-design-vue';
 
-import type { ComponentType } from './types/componentType'
-import { ApiSelect } from '/@/components/Form'
+import type { ComponentType } from './types/componentType';
+import { ApiSelect } from '/@/components/Form';
 
-const componentMap = new Map<ComponentType, Component>()
+const componentMap = new Map<ComponentType, Component>();
 
-componentMap.set('Input', Input)
-componentMap.set('InputNumber', InputNumber)
+componentMap.set('Input', Input);
+componentMap.set('InputNumber', InputNumber);
 
-componentMap.set('Select', Select)
-componentMap.set('ApiSelect', ApiSelect)
-componentMap.set('Switch', Switch)
-componentMap.set('Checkbox', Checkbox)
+componentMap.set('Select', Select);
+componentMap.set('ApiSelect', ApiSelect);
+componentMap.set('Switch', Switch);
+componentMap.set('Checkbox', Checkbox);
 
 export function add(compName: ComponentType, component: Component) {
-  componentMap.set(compName, component)
+  componentMap.set(compName, component);
 }
 
 export function del(compName: ComponentType) {
-  componentMap.delete(compName)
+  componentMap.delete(compName);
 }
 
-export { componentMap }
+export { componentMap };

src/components/Table/src/components/EditTableHeaderIcon.vue

@@ -6,15 +6,15 @@
   </span>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue'
-  import { FormOutlined } from '@ant-design/icons-vue'
+  import { defineComponent } from 'vue';
+  import { FormOutlined } from '@ant-design/icons-vue';
 
-  import { propTypes } from '/@/utils/propTypes'
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'EditTableHeaderIcon',
     components: { FormOutlined },
     props: {
-      title: propTypes.string.def('')
-    }
-  })
+      title: propTypes.string.def(''),
+    },
+  });
 </script>

src/components/Table/src/components/ExpandIcon.tsx

@@ -1,19 +1,19 @@
-import { BasicArrow } from '/@/components/Basic'
+import { BasicArrow } from '/@/components/Basic';
 
 export default () => {
   return (props: Recordable) => {
     if (!props.expandable) {
-      return <span />
+      return <span />;
     }
     return (
       <BasicArrow
         class="mr-1"
         iconStyle="margin-top: -2px;"
         onClick={(e: Event) => {
-          props.onExpand(props.record, e)
+          props.onExpand(props.record, e);
         }}
         expand={props.expanded}
       />
-    )
-  }
-}
+    );
+  };
+};

src/components/Table/src/components/HeaderCell.vue

@@ -6,36 +6,36 @@
   <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue'
-  import type { BasicColumn } from '../types/table'
+  import type { PropType } from 'vue';
+  import type { BasicColumn } from '../types/table';
 
-  import { defineComponent, computed } from 'vue'
-  import BasicHelp from '/@/components/Basic/src/BasicHelp.vue'
-  import EditTableHeaderCell from './EditTableHeaderIcon.vue'
+  import { defineComponent, computed } from 'vue';
+  import BasicHelp from '/@/components/Basic/src/BasicHelp.vue';
+  import EditTableHeaderCell from './EditTableHeaderIcon.vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign'
+  import { useDesign } from '/@/hooks/web/useDesign';
   export default defineComponent({
     name: 'TableHeaderCell',
     components: {
       EditTableHeaderCell,
-      BasicHelp
+      BasicHelp,
     },
     props: {
       column: {
         type: Object as PropType<BasicColumn>,
-        default: {}
-      }
+        default: {},
+      },
     },
     setup(props) {
-      const { prefixCls } = useDesign('basic-table-header-cell')
+      const { prefixCls } = useDesign('basic-table-header-cell');
 
-      const getIsEdit = computed(() => !!props.column?.edit)
-      const getTitle = computed(() => props.column?.customTitle)
-      const getHelpMessage = computed(() => props.column?.helpMessage)
+      const getIsEdit = computed(() => !!props.column?.edit);
+      const getTitle = computed(() => props.column?.customTitle);
+      const getHelpMessage = computed(() => props.column?.helpMessage);
 
-      return { prefixCls, getIsEdit, getTitle, getHelpMessage }
-    }
-  })
+      return { prefixCls, getIsEdit, getTitle, getHelpMessage };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-header-cell';

src/components/Table/src/components/TableAction.vue

@@ -19,20 +19,20 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw } from 'vue'
+  import { defineComponent, PropType, computed, toRaw } from 'vue';
 
-  import { MoreOutlined } from '@ant-design/icons-vue'
-  import Icon from '/@/components/Icon/index'
-  import { ActionItem, TableActionType } from '/@/components/Table'
-  import { PopConfirmButton } from '/@/components/Button'
-  import { Divider } from 'ant-design-vue'
-  import { Dropdown } from '/@/components/Dropdown'
+  import { MoreOutlined } from '@ant-design/icons-vue';
+  import Icon from '/@/components/Icon/index';
+  import { ActionItem, TableActionType } from '/@/components/Table';
+  import { PopConfirmButton } from '/@/components/Button';
+  import { Divider } from 'ant-design-vue';
+  import { Dropdown } from '/@/components/Dropdown';
 
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import { useTableContext } from '../hooks/useTableContext'
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../hooks/useTableContext';
 
-  import { propTypes } from '/@/utils/propTypes'
-  import { ACTION_COLUMN_FLAG } from '../const'
+  import { propTypes } from '/@/utils/propTypes';
+  import { ACTION_COLUMN_FLAG } from '../const';
 
   export default defineComponent({
     name: 'TableAction',
@@ -40,25 +40,25 @@
     props: {
       actions: {
         type: Array as PropType<ActionItem[]>,
-        default: null
+        default: null,
       },
       dropDownActions: {
         type: Array as PropType<ActionItem[]>,
-        default: null
+        default: null,
       },
       divider: propTypes.bool.def(true),
-      outside: propTypes.bool
+      outside: propTypes.bool,
     },
     setup(props) {
-      const { prefixCls } = useDesign('basic-table-action')
-      let table: Partial<TableActionType> = {}
+      const { prefixCls } = useDesign('basic-table-action');
+      let table: Partial<TableActionType> = {};
       if (!props.outside) {
-        table = useTableContext()
+        table = useTableContext();
       }
 
       const getActions = computed(() => {
-        return (toRaw(props.actions) || []).map(action => {
-          const { popConfirm } = action
+        return (toRaw(props.actions) || []).map((action) => {
+          const { popConfirm } = action;
           return {
             type: 'link',
             size: 'small',
@@ -66,31 +66,31 @@
             ...(popConfirm || {}),
             onConfirm: popConfirm?.confirm,
             onCancel: popConfirm?.cancel,
-            enable: !!popConfirm
-          }
-        })
-      })
+            enable: !!popConfirm,
+          };
+        });
+      });
 
       const getDropList = computed(() => {
         return (toRaw(props.dropDownActions) || []).map((action, index) => {
-          const { label } = action
+          const { label } = action;
           return {
             ...action,
             text: label,
-            divider: index < props.dropDownActions.length - 1 ? props.divider : false
-          }
-        })
-      })
+            divider: index < props.dropDownActions.length - 1 ? props.divider : false,
+          };
+        });
+      });
 
       const getAlign = computed(() => {
-        const columns = (table as TableActionType)?.getColumns?.() || []
-        const actionColumn = columns.find(item => item.flag === ACTION_COLUMN_FLAG)
-        return actionColumn?.align ?? 'left'
-      })
+        const columns = (table as TableActionType)?.getColumns?.() || [];
+        const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+        return actionColumn?.align ?? 'left';
+      });
 
-      return { prefixCls, getActions, getDropList, getAlign }
-    }
-  })
+      return { prefixCls, getActions, getDropList, getAlign };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-action';

src/components/Table/src/components/TableFooter.vue

@@ -5,91 +5,91 @@
     :bordered="false"
     :pagination="false"
     :dataSource="getDataSource"
-    :rowKey="r => r[rowKey]"
+    :rowKey="(r) => r[rowKey]"
     :columns="getColumns"
     tableLayout="fixed"
     :scroll="scroll"
   />
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue'
+  import type { PropType } from 'vue';
 
-  import { defineComponent, unref, computed, toRaw } from 'vue'
-  import { Table } from 'ant-design-vue'
-  import { cloneDeep } from 'lodash-es'
-  import { isFunction } from '/@/utils/is'
-  import type { BasicColumn } from '../types/table'
-  import { INDEX_COLUMN_FLAG } from '../const'
-  import { propTypes } from '/@/utils/propTypes'
-  import { useTableContext } from '../hooks/useTableContext'
+  import { defineComponent, unref, computed, toRaw } from 'vue';
+  import { Table } from 'ant-design-vue';
+  import { cloneDeep } from 'lodash-es';
+  import { isFunction } from '/@/utils/is';
+  import type { BasicColumn } from '../types/table';
+  import { INDEX_COLUMN_FLAG } from '../const';
+  import { propTypes } from '/@/utils/propTypes';
+  import { useTableContext } from '../hooks/useTableContext';
 
-  const SUMMARY_ROW_KEY = '_row'
-  const SUMMARY_INDEX_KEY = '_index'
+  const SUMMARY_ROW_KEY = '_row';
+  const SUMMARY_INDEX_KEY = '_index';
   export default defineComponent({
     name: 'BasicTableFooter',
     components: { Table },
     props: {
       summaryFunc: {
-        type: Function as PropType<Fn>
+        type: Function as PropType<Fn>,
       },
       summaryData: {
-        type: Array as PropType<Recordable[]>
+        type: Array as PropType<Recordable[]>,
       },
       scroll: {
-        type: Object as PropType<Recordable>
+        type: Object as PropType<Recordable>,
       },
-      rowKey: propTypes.string.def('key')
+      rowKey: propTypes.string.def('key'),
     },
     setup(props) {
-      const table = useTableContext()
+      const table = useTableContext();
 
       const getDataSource = computed((): Recordable[] => {
-        const { summaryFunc, summaryData } = props
+        const { summaryFunc, summaryData } = props;
         if (summaryData?.length) {
-          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`))
-          return summaryData
+          summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
+          return summaryData;
         }
         if (!isFunction(summaryFunc)) {
-          return []
+          return [];
         }
-        let dataSource = toRaw(unref(table.getDataSource()))
-        dataSource = summaryFunc(dataSource)
+        let dataSource = toRaw(unref(table.getDataSource()));
+        dataSource = summaryFunc(dataSource);
         dataSource.forEach((item, i) => {
-          item[props.rowKey] = `${i}`
-        })
-        return dataSource
-      })
+          item[props.rowKey] = `${i}`;
+        });
+        return dataSource;
+      });
 
       const getColumns = computed(() => {
-        const dataSource = unref(getDataSource)
-        const columns: BasicColumn[] = cloneDeep(table.getColumns())
-        const index = columns.findIndex(item => item.flag === INDEX_COLUMN_FLAG)
-        const hasRowSummary = dataSource.some(item => Reflect.has(item, SUMMARY_ROW_KEY))
-        const hasIndexSummary = dataSource.some(item => Reflect.has(item, SUMMARY_INDEX_KEY))
+        const dataSource = unref(getDataSource);
+        const columns: BasicColumn[] = cloneDeep(table.getColumns());
+        const index = columns.findIndex((item) => item.flag === INDEX_COLUMN_FLAG);
+        const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
+        const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
 
         if (index !== -1) {
           if (hasIndexSummary) {
-            columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY]
-            columns[index].ellipsis = false
+            columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
+            columns[index].ellipsis = false;
           } else {
-            Reflect.deleteProperty(columns[index], 'customRender')
+            Reflect.deleteProperty(columns[index], 'customRender');
           }
         }
 
         if (table.getRowSelection() && hasRowSummary) {
-          const isFixed = columns.some(col => col.fixed === 'left')
+          const isFixed = columns.some((col) => col.fixed === 'left');
           columns.unshift({
             width: 60,
             title: 'selection',
             key: 'selectionKey',
             align: 'center',
             ...(isFixed ? { fixed: 'left' } : {}),
-            customRender: ({ record }) => record[SUMMARY_ROW_KEY]
-          })
+            customRender: ({ record }) => record[SUMMARY_ROW_KEY],
+          });
         }
-        return columns
-      })
-      return { getColumns, getDataSource }
-    }
-  })
+        return columns;
+      });
+      return { getColumns, getDataSource };
+    },
+  });
 </script>

src/components/Table/src/components/TableHeader.vue

@@ -10,43 +10,43 @@
   </div>
 </template>
 <script lang="ts">
-  import type { TableSetting } from '../types/table'
-  import type { PropType } from 'vue'
+  import type { TableSetting } from '../types/table';
+  import type { PropType } from 'vue';
 
-  import { defineComponent } from 'vue'
-  import { Divider } from 'ant-design-vue'
-  import TableSettingComponent from './settings/index.vue'
-  import TableTitle from './TableTitle.vue'
+  import { defineComponent } from 'vue';
+  import { Divider } from 'ant-design-vue';
+  import TableSettingComponent from './settings/index.vue';
+  import TableTitle from './TableTitle.vue';
 
-  import { useDesign } from '/@/hooks/web/useDesign'
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'BasicTableHeader',
     components: {
       Divider,
       TableTitle,
-      TableSetting: TableSettingComponent
+      TableSetting: TableSettingComponent,
     },
     props: {
       title: {
-        type: [Function, String] as PropType<string | ((data: Recordable) => string)>
+        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
       },
       tableSetting: {
-        type: Object as PropType<TableSetting>
+        type: Object as PropType<TableSetting>,
       },
       showTableSetting: {
-        type: Boolean
+        type: Boolean,
       },
       titleHelpMessage: {
         type: [String, Array] as PropType<string | string[]>,
-        default: ''
-      }
+        default: '',
+      },
     },
     setup() {
-      const { prefixCls } = useDesign('basic-table-header')
-      return { prefixCls }
-    }
-  })
+      const { prefixCls } = useDesign('basic-table-header');
+      return { prefixCls };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-header';

src/components/Table/src/components/TableImg.vue

@@ -13,33 +13,33 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties } from 'vue'
-  import { defineComponent, computed } from 'vue'
-  import { useDesign } from '/@/hooks/web/useDesign'
+  import type { CSSProperties } from 'vue';
+  import { defineComponent, computed } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
-  import { Image } from 'ant-design-vue'
-  import { propTypes } from '/@/utils/propTypes'
+  import { Image } from 'ant-design-vue';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'TableImage',
     components: { Image, PreviewGroup: Image.PreviewGroup },
     props: {
       imgList: propTypes.arrayOf(propTypes.string),
-      size: propTypes.number.def(40)
+      size: propTypes.number.def(40),
     },
     setup(props) {
       const getWrapStyle = computed(
         (): CSSProperties => {
-          const { size } = props
-          const s = `${size}px`
-          return { height: s, width: s }
+          const { size } = props;
+          const s = `${size}px`;
+          return { height: s, width: s };
         }
-      )
+      );
 
-      const { prefixCls } = useDesign('basic-table-img')
-      return { prefixCls, getWrapStyle }
-    }
-  })
+      const { prefixCls } = useDesign('basic-table-img');
+      return { prefixCls, getWrapStyle };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-img';

src/components/Table/src/components/TableTitle.vue

@@ -4,43 +4,43 @@
   </BasicTitle>
 </template>
 <script lang="ts">
-  import { computed, defineComponent, PropType } from 'vue'
+  import { computed, defineComponent, PropType } from 'vue';
 
-  import { BasicTitle } from '/@/components/Basic/index'
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import { isFunction } from '/@/utils/is'
+  import { BasicTitle } from '/@/components/Basic/index';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isFunction } from '/@/utils/is';
   export default defineComponent({
     name: 'BasicTableTitle',
     components: { BasicTitle },
     props: {
       title: {
-        type: [Function, String] as PropType<string | ((data: Recordable) => string)>
+        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
       },
       getSelectRows: {
-        type: Function as PropType<() => Recordable[]>
+        type: Function as PropType<() => Recordable[]>,
       },
       helpMessage: {
-        type: [String, Array] as PropType<string | string[]>
-      }
+        type: [String, Array] as PropType<string | string[]>,
+      },
     },
     setup(props) {
-      const { prefixCls } = useDesign('basic-table-title')
+      const { prefixCls } = useDesign('basic-table-title');
 
       const getTitle = computed(() => {
-        const { title, getSelectRows = () => {} } = props
-        let tit = title
+        const { title, getSelectRows = () => {} } = props;
+        let tit = title;
 
         if (isFunction(title)) {
           tit = title({
-            selectRows: getSelectRows()
-          })
+            selectRows: getSelectRows(),
+          });
         }
-        return tit
-      })
+        return tit;
+      });
 
-      return { getTitle, prefixCls }
-    }
-  })
+      return { getTitle, prefixCls };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-table-title';

src/components/Table/src/components/editable/CellComponent.ts

@@ -1,33 +1,33 @@
-import type { FunctionalComponent, defineComponent } from 'vue'
-import type { ComponentType } from '../../types/componentType'
-import { componentMap } from '/@/components/Table/src/componentMap'
+import type { FunctionalComponent, defineComponent } from 'vue';
+import type { ComponentType } from '../../types/componentType';
+import { componentMap } from '/@/components/Table/src/componentMap';
 
-import { Popover } from 'ant-design-vue'
-import { h } from 'vue'
+import { Popover } from 'ant-design-vue';
+import { h } from 'vue';
 
 export interface ComponentProps {
-  component: ComponentType
-  rule: boolean
-  popoverVisible: boolean
-  ruleMessage: string
+  component: ComponentType;
+  rule: boolean;
+  popoverVisible: boolean;
+  ruleMessage: string;
 }
 
 export const CellComponent: FunctionalComponent = (
   { component = 'Input', rule = true, ruleMessage, popoverVisible }: ComponentProps,
   { attrs }
 ) => {
-  const Comp = componentMap.get(component) as typeof defineComponent
+  const Comp = componentMap.get(component) as typeof defineComponent;
 
-  const DefaultComp = h(Comp, attrs)
+  const DefaultComp = h(Comp, attrs);
   if (!rule) {
-    return DefaultComp
+    return DefaultComp;
   }
   return h(
     Popover,
     { overlayClassName: 'edit-cell-rule-popover', visible: !!popoverVisible },
     {
       default: () => DefaultComp,
-      content: () => ruleMessage
+      content: () => ruleMessage,
     }
-  )
-}
+  );
+};

src/components/Table/src/components/editable/EditableCell.vue

@@ -27,241 +27,241 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties, PropType } from 'vue'
-  import type { BasicColumn } from '../../types/table'
-  import type { EditRecordRow } from './index'
+  import type { CSSProperties, PropType } from 'vue';
+  import type { BasicColumn } from '../../types/table';
+  import type { EditRecordRow } from './index';
 
-  import { defineComponent, ref, unref, nextTick, computed, watchEffect, toRaw } from 'vue'
-  import { FormOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue'
-  import { CellComponent } from './CellComponent'
+  import { defineComponent, ref, unref, nextTick, computed, watchEffect, toRaw } from 'vue';
+  import { FormOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
+  import { CellComponent } from './CellComponent';
 
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import { useTableContext } from '../../hooks/useTableContext'
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useTableContext } from '../../hooks/useTableContext';
 
-  import clickOutside from '/@/directives/clickOutside'
+  import clickOutside from '/@/directives/clickOutside';
 
-  import { propTypes } from '/@/utils/propTypes'
-  import { isString, isBoolean, isFunction, isNumber, isArray } from '/@/utils/is'
-  import { createPlaceholderMessage } from './helper'
+  import { propTypes } from '/@/utils/propTypes';
+  import { isString, isBoolean, isFunction, isNumber, isArray } from '/@/utils/is';
+  import { createPlaceholderMessage } from './helper';
 
   export default defineComponent({
     name: 'EditableCell',
     components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent },
     directives: {
-      clickOutside
+      clickOutside,
     },
     props: {
       value: {
         type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
-        default: ''
+        default: '',
       },
       record: {
-        type: Object as PropType<EditRecordRow>
+        type: Object as PropType<EditRecordRow>,
       },
       column: {
         type: Object as PropType<BasicColumn>,
-        default: {}
+        default: {},
       },
-      index: propTypes.number
+      index: propTypes.number,
     },
     setup(props) {
-      const table = useTableContext()
-      const isEdit = ref(false)
-      const elRef = ref<any>(null)
-      const ruleVisible = ref(false)
-      const ruleMessage = ref('')
-      const optionsRef = ref<LabelValueOptions>([])
-      const currentValueRef = ref<any>(props.value)
-      const defaultValueRef = ref<any>(props.value)
+      const table = useTableContext();
+      const isEdit = ref(false);
+      const elRef = ref<any>(null);
+      const ruleVisible = ref(false);
+      const ruleMessage = ref('');
+      const optionsRef = ref<LabelValueOptions>([]);
+      const currentValueRef = ref<any>(props.value);
+      const defaultValueRef = ref<any>(props.value);
 
-      const { prefixCls } = useDesign('editable-cell')
+      const { prefixCls } = useDesign('editable-cell');
 
-      const getComponent = computed(() => props.column?.editComponent || 'Input')
-      const getRule = computed(() => props.column?.editRule)
+      const getComponent = computed(() => props.column?.editComponent || 'Input');
+      const getRule = computed(() => props.column?.editRule);
 
       const getRuleVisible = computed(() => {
-        return unref(ruleMessage) && unref(ruleVisible)
-      })
+        return unref(ruleMessage) && unref(ruleVisible);
+      });
 
       const getIsCheckComp = computed(() => {
-        const component = unref(getComponent)
-        return ['Checkbox', 'Switch'].includes(component)
-      })
+        const component = unref(getComponent);
+        return ['Checkbox', 'Switch'].includes(component);
+      });
 
       const getComponentProps = computed(() => {
-        const compProps = props.column?.editComponentProps ?? {}
-        const component = unref(getComponent)
-        const apiSelectProps: Recordable = {}
+        const compProps = props.column?.editComponentProps ?? {};
+        const component = unref(getComponent);
+        const apiSelectProps: Recordable = {};
         if (component === 'ApiSelect') {
-          apiSelectProps.cache = true
+          apiSelectProps.cache = true;
         }
 
-        const isCheckValue = unref(getIsCheckComp)
+        const isCheckValue = unref(getIsCheckComp);
 
-        const valueField = isCheckValue ? 'checked' : 'value'
-        const val = unref(currentValueRef)
+        const valueField = isCheckValue ? 'checked' : 'value';
+        const val = unref(currentValueRef);
 
-        const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val
+        const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
 
         return {
           placeholder: createPlaceholderMessage(unref(getComponent)),
           ...apiSelectProps,
           ...compProps,
-          [valueField]: value
-        }
-      })
+          [valueField]: value,
+        };
+      });
 
       const getValues = computed(() => {
-        const { editComponentProps, editValueMap } = props.column
+        const { editComponentProps, editValueMap } = props.column;
 
-        const value = unref(currentValueRef)
+        const value = unref(currentValueRef);
 
         if (editValueMap && isFunction(editValueMap)) {
-          return editValueMap(value)
+          return editValueMap(value);
         }
 
-        const component = unref(getComponent)
+        const component = unref(getComponent);
         if (!component.includes('Select')) {
-          return value
+          return value;
         }
 
-        const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || [])
-        const option = options.find(item => `${item.value}` === `${value}`)
+        const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || []);
+        const option = options.find((item) => `${item.value}` === `${value}`);
 
-        return option?.label ?? value
-      })
+        return option?.label ?? value;
+      });
 
       const getWrapperStyle = computed(
         (): CSSProperties => {
           if (unref(getIsCheckComp) || unref(getRowEditable)) {
-            return {}
+            return {};
           }
           return {
-            width: 'calc(100% - 48px)'
-          }
+            width: 'calc(100% - 48px)',
+          };
         }
-      )
+      );
 
       const getRowEditable = computed(() => {
-        const { editable } = props.record || {}
-        return !!editable
-      })
+        const { editable } = props.record || {};
+        return !!editable;
+      });
 
       watchEffect(() => {
-        defaultValueRef.value = props.value
-      })
+        defaultValueRef.value = props.value;
+      });
 
       watchEffect(() => {
-        const { editable } = props.column
+        const { editable } = props.column;
         if (isBoolean(editable) || isBoolean(unref(getRowEditable))) {
-          isEdit.value = !!editable || unref(getRowEditable)
+          isEdit.value = !!editable || unref(getRowEditable);
         }
-      })
+      });
 
       function handleEdit() {
-        if (unref(getRowEditable) || unref(props.column?.editRow)) return
-        ruleMessage.value = ''
-        isEdit.value = true
+        if (unref(getRowEditable) || unref(props.column?.editRow)) return;
+        ruleMessage.value = '';
+        isEdit.value = true;
         nextTick(() => {
-          const el = unref(elRef)
-          el?.focus?.()
-        })
+          const el = unref(elRef);
+          el?.focus?.();
+        });
       }
 
       async function handleChange(e: any) {
-        const component = unref(getComponent)
+        const component = unref(getComponent);
         if (!e) {
-          currentValueRef.value = e
+          currentValueRef.value = e;
         } else if (e?.target && Reflect.has(e.target, 'value')) {
-          currentValueRef.value = (e as ChangeEvent).target.value
+          currentValueRef.value = (e as ChangeEvent).target.value;
         } else if (component === 'Checkbox') {
-          currentValueRef.value = (e as ChangeEvent).target.checked
+          currentValueRef.value = (e as ChangeEvent).target.checked;
         } else if (isString(e) || isBoolean(e) || isNumber(e)) {
-          currentValueRef.value = e
+          currentValueRef.value = e;
         }
 
         table.emit?.('edit-change', {
           column: props.column,
           value: unref(currentValueRef),
-          record: toRaw(props.record)
-        })
-        handleSubmiRule()
+          record: toRaw(props.record),
+        });
+        handleSubmiRule();
       }
 
       async function handleSubmiRule() {
-        const { column, record } = props
-        const { editRule } = column
-        const currentValue = unref(currentValueRef)
+        const { column, record } = props;
+        const { editRule } = column;
+        const currentValue = unref(currentValueRef);
 
         if (editRule) {
           if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) {
-            ruleVisible.value = true
-            const component = unref(getComponent)
-            const message = createPlaceholderMessage(component)
-            ruleMessage.value = message
-            return false
+            ruleVisible.value = true;
+            const component = unref(getComponent);
+            const message = createPlaceholderMessage(component);
+            ruleMessage.value = message;
+            return false;
           }
           if (isFunction(editRule)) {
-            const res = await editRule(currentValue, record as Recordable)
+            const res = await editRule(currentValue, record as Recordable);
             if (!!res) {
-              ruleMessage.value = res
-              ruleVisible.value = true
-              return false
+              ruleMessage.value = res;
+              ruleVisible.value = true;
+              return false;
             } else {
-              ruleMessage.value = ''
-              return true
+              ruleMessage.value = '';
+              return true;
             }
           }
         }
-        ruleMessage.value = ''
-        return true
+        ruleMessage.value = '';
+        return true;
       }
 
       async function handleSubmit(needEmit = true, valid = true) {
         if (valid) {
-          const isPass = await handleSubmiRule()
-          if (!isPass) return false
+          const isPass = await handleSubmiRule();
+          if (!isPass) return false;
         }
 
-        const { column, index } = props
-        const { key, dataIndex } = column
-        const value = unref(currentValueRef)
-        if (!key || !dataIndex) return
+        const { column, index } = props;
+        const { key, dataIndex } = column;
+        const value = unref(currentValueRef);
+        if (!key || !dataIndex) return;
 
-        const dataKey = (dataIndex || key) as string
+        const dataKey = (dataIndex || key) as string;
 
-        const record = await table.updateTableData(index, dataKey, value)
-        needEmit && table.emit?.('edit-end', { record, index, key, value })
-        isEdit.value = false
+        const record = await table.updateTableData(index, dataKey, value);
+        needEmit && table.emit?.('edit-end', { record, index, key, value });
+        isEdit.value = false;
       }
 
       async function handleEnter() {
         if (props.column?.editRow) {
-          return
+          return;
         }
-        handleSubmit()
+        handleSubmit();
       }
 
       function handleCancel() {
-        isEdit.value = false
-        currentValueRef.value = defaultValueRef.value
-        table.emit?.('edit-cancel', unref(currentValueRef))
+        isEdit.value = false;
+        currentValueRef.value = defaultValueRef.value;
+        table.emit?.('edit-cancel', unref(currentValueRef));
       }
 
       function onClickOutside() {
         if (props.column?.editable || unref(getRowEditable)) {
-          return
+          return;
         }
-        const component = unref(getComponent)
+        const component = unref(getComponent);
 
         if (component.includes('Input')) {
-          handleCancel()
+          handleCancel();
         }
       }
 
       // only ApiSelect
       function handleOptionsChange(options: LabelValueOptions) {
-        optionsRef.value = options
+        optionsRef.value = options;
       }
 
       function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
@@ -269,35 +269,35 @@
           /* eslint-disable  */
           isArray(props.record[cbs])
             ? props.record[cbs]?.push(handle)
-            : (props.record[cbs] = [handle])
+            : (props.record[cbs] = [handle]);
         }
       }
 
       if (props.record) {
-        initCbs('submitCbs', handleSubmit)
-        initCbs('validCbs', handleSubmiRule)
-        initCbs('cancelCbs', handleCancel)
+        initCbs('submitCbs', handleSubmit);
+        initCbs('validCbs', handleSubmiRule);
+        initCbs('cancelCbs', handleCancel);
 
         /* eslint-disable  */
         props.record.onCancelEdit = () => {
-          isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach(fn => fn())
-        }
+          isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
+        };
         /* eslint-disable */
         props.record.onSubmitEdit = async () => {
           if (isArray(props.record?.submitCbs)) {
-            const validFns = (props.record?.validCbs || []).map(fn => fn())
+            const validFns = (props.record?.validCbs || []).map((fn) => fn());
 
-            const res = await Promise.all(validFns)
+            const res = await Promise.all(validFns);
 
-            const pass = res.every(item => !!item)
+            const pass = res.every((item) => !!item);
 
-            if (!pass) return
-            const submitFns = props.record?.submitCbs || []
-            submitFns.forEach(fn => fn(false, false))
-            table.emit?.('edit-row-end')
-            return true
+            if (!pass) return;
+            const submitFns = props.record?.submitCbs || [];
+            submitFns.forEach((fn) => fn(false, false));
+            table.emit?.('edit-row-end');
+            return true;
           }
-        }
+        };
       }
 
       return {
@@ -319,11 +319,11 @@
         getWrapperStyle,
         getRowEditable,
         getValues,
-        handleEnter
+        handleEnter,
         // getSize,
-      }
-    }
-  })
+      };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-editable-cell';

src/components/Table/src/components/editable/helper.ts

@@ -1,17 +1,17 @@
-import { ComponentType } from '../../types/componentType'
-import { useI18n } from '/@/hooks/web/useI18n'
+import { ComponentType } from '../../types/componentType';
+import { useI18n } from '/@/hooks/web/useI18n';
 
-const { t } = useI18n()
+const { t } = useI18n();
 
 /**
  * @description: 生成placeholder
  */
 export function createPlaceholderMessage(component: ComponentType) {
   if (component.includes('Input')) {
-    return t('common.inputText')
+    return t('common.inputText');
   }
   if (component.includes('Picker')) {
-    return t('common.chooseText')
+    return t('common.chooseText');
   }
 
   if (
@@ -20,7 +20,7 @@ export function createPlaceholderMessage(component: ComponentType) {
     component.includes('Radio') ||
     component.includes('Switch')
   ) {
-    return t('common.chooseText')
+    return t('common.chooseText');
   }
-  return ''
+  return '';
 }

src/components/Table/src/components/editable/index.ts

@@ -1,54 +1,54 @@
-import type { BasicColumn } from '/@/components/Table/src/types/table'
+import type { BasicColumn } from '/@/components/Table/src/types/table';
 
-import { h } from 'vue'
+import { h } from 'vue';
 
-import EditableCell from './EditableCell.vue'
+import EditableCell from './EditableCell.vue';
 
 interface Params {
-  text: string
-  record: Recordable
-  index: number
+  text: string;
+  record: Recordable;
+  index: number;
 }
 
 export function renderEditCell(column: BasicColumn) {
   return ({ text: value, record, index }: Params) => {
     record.onEdit = async (edit: boolean, submit = false) => {
       if (!submit) {
-        record.editable = edit
+        record.editable = edit;
       }
 
       if (!edit && submit) {
-        const res = await record.onSubmitEdit?.()
+        const res = await record.onSubmitEdit?.();
         if (res) {
-          record.editable = false
-          return true
+          record.editable = false;
+          return true;
         }
-        return false
+        return false;
       }
       // cancel
       if (!edit && !submit) {
-        record.onCancelEdit?.()
+        record.onCancelEdit?.();
       }
-      return true
-    }
+      return true;
+    };
 
     return h(EditableCell, {
       value,
       record,
       column,
-      index
-    })
-  }
+      index,
+    });
+  };
 }
 
-export type EditRecordRow<T = Hash<any>> = Partial<
+export type EditRecordRow<T = Recordable> = Partial<
   {
-    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>
-    editable: boolean
-    onCancel: Fn
-    onSubmit: Fn
-    submitCbs: Fn[]
-    cancelCbs: Fn[]
-    validCbs: Fn[]
+    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    editable: boolean;
+    onCancel: Fn;
+    onSubmit: Fn;
+    submitCbs: Fn[];
+    cancelCbs: Fn[];
+    validCbs: Fn[];
   } & T
->
+>;

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -57,8 +57,8 @@
                       `${prefixCls}__fixed-left`,
                       {
                         active: item.fixed === 'left',
-                        disabled: !checkedList.includes(item.value)
-                      }
+                        disabled: !checkedList.includes(item.value),
+                      },
                     ]"
                     @click="handleColumnFixed(item, 'left')"
                   />
@@ -74,8 +74,8 @@
                       `${prefixCls}__fixed-right`,
                       {
                         active: item.fixed === 'right',
-                        disabled: !checkedList.includes(item.value)
-                      }
+                        disabled: !checkedList.includes(item.value),
+                      },
                     ]"
                     @click="handleColumnFixed(item, 'right')"
                   />
@@ -98,35 +98,35 @@
     watchEffect,
     nextTick,
     unref,
-    computed
-  } from 'vue'
-  import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue'
-  import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue'
-  import { Icon } from '/@/components/Icon'
-  import { ScrollContainer } from '/@/components/Container'
+    computed,
+  } from 'vue';
+  import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue';
+  import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue';
+  import { Icon } from '/@/components/Icon';
+  import { ScrollContainer } from '/@/components/Container';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useTableContext } from '../../hooks/useTableContext'
-  import { useDesign } from '/@/hooks/web/useDesign'
-  import { useSortable } from '/@/hooks/web/useSortable'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useSortable } from '/@/hooks/web/useSortable';
 
-  import { isNullAndUnDef } from '/@/utils/is'
-  import { getPopupContainer } from '/@/utils'
-  import { omit } from 'lodash-es'
+  import { isNullAndUnDef } from '/@/utils/is';
+  import { getPopupContainer } from '/@/utils';
+  import { omit } from 'lodash-es';
 
-  import type { BasicColumn } from '../../types/table'
+  import type { BasicColumn } from '../../types/table';
 
   interface State {
-    indeterminate: boolean
-    checkAll: boolean
-    checkedList: string[]
-    defaultCheckList: string[]
+    indeterminate: boolean;
+    checkAll: boolean;
+    checkedList: string[];
+    defaultCheckList: string[];
   }
 
   interface Options {
-    label: string
-    value: string
-    fixed?: boolean | 'left' | 'right'
+    label: string;
+    value: string;
+    fixed?: boolean | 'left' | 'right';
   }
 
   export default defineComponent({
@@ -140,200 +140,200 @@
       DragOutlined,
       ScrollContainer,
       Divider,
-      Icon
+      Icon,
     },
 
     setup() {
-      const { t } = useI18n()
-      const table = useTableContext()
+      const { t } = useI18n();
+      const table = useTableContext();
 
-      const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys')
-      let inited = false
+      const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys');
+      let inited = false;
 
-      const cachePlainOptions = ref<Options[]>([])
-      const plainOptions = ref<Options[]>([])
+      const cachePlainOptions = ref<Options[]>([]);
+      const plainOptions = ref<Options[]>([]);
 
-      const plainSortOptions = ref<Options[]>([])
+      const plainSortOptions = ref<Options[]>([]);
 
-      const columnListRef = ref<ComponentRef>(null)
+      const columnListRef = ref<ComponentRef>(null);
 
       const state = reactive<State>({
         indeterminate: false,
         checkAll: true,
         checkedList: [],
-        defaultCheckList: []
-      })
+        defaultCheckList: [],
+      });
 
-      const checkIndex = ref(false)
-      const checkSelect = ref(false)
+      const checkIndex = ref(false);
+      const checkSelect = ref(false);
 
-      const { prefixCls } = useDesign('basic-column-setting')
+      const { prefixCls } = useDesign('basic-column-setting');
 
       const getValues = computed(() => {
-        return unref(table?.getBindValues) || {}
-      })
+        return unref(table?.getBindValues) || {};
+      });
 
       watchEffect(() => {
-        const columns = table.getColumns()
+        const columns = table.getColumns();
         if (columns.length) {
-          init()
+          init();
         }
-      })
+      });
 
       watchEffect(() => {
-        const values = unref(getValues)
-        checkIndex.value = !!values.showIndexColumn
-        checkSelect.value = !!values.rowSelection
-      })
+        const values = unref(getValues);
+        checkIndex.value = !!values.showIndexColumn;
+        checkSelect.value = !!values.rowSelection;
+      });
 
       function getColumns() {
-        const ret: Options[] = []
-        table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach(item => {
+        const ret: Options[] = [];
+        table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
           ret.push({
             label: (item.title as string) || (item.customTitle as string),
             value: (item.dataIndex || item.title) as string,
-            ...item
-          })
-        })
-        return ret
+            ...item,
+          });
+        });
+        return ret;
       }
 
       function init() {
-        const columns = getColumns()
+        const columns = getColumns();
 
         const checkList = table
           .getColumns()
-          .map(item => {
+          .map((item) => {
             if (item.defaultHidden) {
-              return ''
+              return '';
             }
-            return item.dataIndex || item.title
+            return item.dataIndex || item.title;
           })
-          .filter(Boolean) as string[]
+          .filter(Boolean) as string[];
 
         if (!plainOptions.value.length) {
-          plainOptions.value = columns
-          plainSortOptions.value = columns
-          cachePlainOptions.value = columns
-          state.defaultCheckList = checkList
+          plainOptions.value = columns;
+          plainSortOptions.value = columns;
+          cachePlainOptions.value = columns;
+          state.defaultCheckList = checkList;
         } else {
           // const fixedColumns = columns.filter((item) =>
           //   Reflect.has(item, 'fixed')
           // ) as BasicColumn[];
 
           unref(plainOptions).forEach((item: BasicColumn) => {
-            const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex)
+            const findItem = columns.find((col: BasicColumn) => col.dataIndex === item.dataIndex);
             if (findItem) {
-              item.fixed = findItem.fixed
+              item.fixed = findItem.fixed;
             }
-          })
+          });
         }
-        state.checkedList = checkList
+        state.checkedList = checkList;
       }
 
       // checkAll change
       function onCheckAllChange(e: ChangeEvent) {
-        state.indeterminate = false
-        const checkList = plainOptions.value.map(item => item.value)
+        state.indeterminate = false;
+        const checkList = plainOptions.value.map((item) => item.value);
         if (e.target.checked) {
-          state.checkedList = checkList
-          table.setColumns(checkList)
+          state.checkedList = checkList;
+          table.setColumns(checkList);
         } else {
-          state.checkedList = []
-          table.setColumns([])
+          state.checkedList = [];
+          table.setColumns([]);
         }
       }
 
       // Trigger when check/uncheck a column
       function onChange(checkedList: string[]) {
-        const len = plainOptions.value.length
-        state.indeterminate = !!checkedList.length && checkedList.length < len
-        state.checkAll = checkedList.length === len
+        const len = plainOptions.value.length;
+        state.indeterminate = !!checkedList.length && checkedList.length < len;
+        state.checkAll = checkedList.length === len;
 
-        const sortList = unref(plainSortOptions).map(item => item.value)
+        const sortList = unref(plainSortOptions).map((item) => item.value);
         checkedList.sort((prev, next) => {
-          return sortList.indexOf(prev) - sortList.indexOf(next)
-        })
-        table.setColumns(checkedList)
+          return sortList.indexOf(prev) - sortList.indexOf(next);
+        });
+        table.setColumns(checkedList);
       }
 
       // reset columns
       function reset() {
-        state.checkedList = [...state.defaultCheckList]
-        state.checkAll = true
-        state.indeterminate = false
-        plainOptions.value = unref(cachePlainOptions)
-        plainSortOptions.value = unref(cachePlainOptions)
-        table.setColumns(table.getCacheColumns())
+        state.checkedList = [...state.defaultCheckList];
+        state.checkAll = true;
+        state.indeterminate = false;
+        plainOptions.value = unref(cachePlainOptions);
+        plainSortOptions.value = unref(cachePlainOptions);
+        table.setColumns(table.getCacheColumns());
       }
 
       // Open the pop-up window for drag and drop initialization
       function handleVisibleChange() {
-        if (inited) return
+        if (inited) return;
         nextTick(() => {
-          const columnListEl = unref(columnListRef)
-          if (!columnListEl) return
-          const el = columnListEl.$el
-          if (!el) return
+          const columnListEl = unref(columnListRef);
+          if (!columnListEl) return;
+          const el = columnListEl.$el;
+          if (!el) return;
           // Drag and drop sort
           const { initSortable } = useSortable(el, {
             handle: '.table-coulmn-drag-icon ',
-            onEnd: evt => {
-              const { oldIndex, newIndex } = evt
+            onEnd: (evt) => {
+              const { oldIndex, newIndex } = evt;
               if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
-                return
+                return;
               }
               // Sort column
-              const columns = getColumns()
+              const columns = getColumns();
 
               if (oldIndex > newIndex) {
-                columns.splice(newIndex, 0, columns[oldIndex])
-                columns.splice(oldIndex + 1, 1)
+                columns.splice(newIndex, 0, columns[oldIndex]);
+                columns.splice(oldIndex + 1, 1);
               } else {
-                columns.splice(newIndex + 1, 0, columns[oldIndex])
-                columns.splice(oldIndex, 1)
+                columns.splice(newIndex + 1, 0, columns[oldIndex]);
+                columns.splice(oldIndex, 1);
               }
 
-              plainSortOptions.value = columns
-              plainOptions.value = columns
-              table.setColumns(columns)
-            }
-          })
-          initSortable()
-          inited = true
-        })
+              plainSortOptions.value = columns;
+              plainOptions.value = columns;
+              table.setColumns(columns);
+            },
+          });
+          initSortable();
+          inited = true;
+        });
       }
 
       // Control whether the serial number column is displayed
       function handleIndexCheckChange(e: ChangeEvent) {
         table.setProps({
-          showIndexColumn: e.target.checked
-        })
+          showIndexColumn: e.target.checked,
+        });
       }
 
       // Control whether the check box is displayed
       function handleSelectCheckChange(e: ChangeEvent) {
         table.setProps({
-          rowSelection: e.target.checked ? defaultRowSelection : undefined
-        })
+          rowSelection: e.target.checked ? defaultRowSelection : undefined,
+        });
       }
 
       function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
-        if (!state.checkedList.includes(item.dataIndex as string)) return
+        if (!state.checkedList.includes(item.dataIndex as string)) return;
 
-        const columns = getColumns() as BasicColumn[]
-        const isFixed = item.fixed === fixed ? false : fixed
-        const index = columns.findIndex(col => col.dataIndex === item.dataIndex)
+        const columns = getColumns() as BasicColumn[];
+        const isFixed = item.fixed === fixed ? false : fixed;
+        const index = columns.findIndex((col) => col.dataIndex === item.dataIndex);
         if (index !== -1) {
-          columns[index].fixed = isFixed
+          columns[index].fixed = isFixed;
         }
-        item.fixed = isFixed
+        item.fixed = isFixed;
 
         if (isFixed && !item.width) {
-          item.width = 100
+          item.width = 100;
         }
-        table.setCacheColumnsByField?.(item.dataIndex, { fixed: isFixed })
-        table.setColumns(columns)
+        table.setCacheColumnsByField?.(item.dataIndex, { fixed: isFixed });
+        table.setColumns(columns);
       }
 
       return {
@@ -352,10 +352,10 @@
         handleSelectCheckChange,
         defaultRowSelection,
         handleColumnFixed,
-        getPopupContainer
-      }
-    }
-  })
+        getPopupContainer,
+      };
+    },
+  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-column-setting';

src/components/Table/src/components/settings/FullScreenSetting.vue

@@ -3,37 +3,38 @@
     <template #title>
       <span>{{ t('component.table.settingFullScreen') }}</span>
     </template>
-    <FullscreenOutlined @click="toggleFullscreen" v-if="!isFullscreenRef" />
-    <FullscreenExitOutlined @click="toggleFullscreen" v-else />
+    <FullscreenOutlined @click="toggle" v-if="!isFullscreen" />
+    <FullscreenExitOutlined @click="toggle" v-else />
   </Tooltip>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue'
-  import { Tooltip } from 'ant-design-vue'
-  import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'
+  import { defineComponent } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
 
-  import { useFullscreen } from '/@/hooks/web/useFullScreen'
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useTableContext } from '../../hooks/useTableContext'
+  import { useFullscreen } from '@vueuse/core';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
 
   export default defineComponent({
     name: 'FullScreenSetting',
     components: {
       FullscreenExitOutlined,
       FullscreenOutlined,
-      Tooltip
+      Tooltip,
     },
 
     setup() {
-      const table = useTableContext()
-      const { t } = useI18n()
-      const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef)
+      const table = useTableContext();
+      const { t } = useI18n();
+      const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
 
       return {
-        toggleFullscreen,
-        isFullscreenRef,
-        t
-      }
-    }
-  })
+        toggle,
+        isFullscreen,
+        t,
+      };
+    },
+  });
 </script>

src/components/Table/src/components/settings/RedoSetting.vue

@@ -7,28 +7,28 @@
   </Tooltip>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue'
-  import { Tooltip } from 'ant-design-vue'
-  import { RedoOutlined } from '@ant-design/icons-vue'
+  import { defineComponent } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { RedoOutlined } from '@ant-design/icons-vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useTableContext } from '../../hooks/useTableContext'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
 
   export default defineComponent({
     name: 'RedoSetting',
     components: {
       RedoOutlined,
-      Tooltip
+      Tooltip,
     },
     setup() {
-      const table = useTableContext()
-      const { t } = useI18n()
+      const table = useTableContext();
+      const { t } = useI18n();
 
       function redo() {
-        table.reload()
+        table.reload();
       }
 
-      return { redo, t }
-    }
-  })
+      return { redo, t };
+    },
+  });
 </script>

src/components/Table/src/components/settings/SizeSetting.vue

@@ -23,15 +23,15 @@
   </Tooltip>
 </template>
 <script lang="ts">
-  import type { SizeType } from '../../types/table'
+  import type { SizeType } from '../../types/table';
 
-  import { defineComponent, ref } from 'vue'
-  import { Tooltip, Dropdown, Menu } from 'ant-design-vue'
-  import { ColumnHeightOutlined } from '@ant-design/icons-vue'
+  import { defineComponent, ref } from 'vue';
+  import { Tooltip, Dropdown, Menu } from 'ant-design-vue';
+  import { ColumnHeightOutlined } from '@ant-design/icons-vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useTableContext } from '../../hooks/useTableContext'
-  import { getPopupContainer } from '/@/utils'
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import { getPopupContainer } from '/@/utils';
 
   export default defineComponent({
     name: 'SizeSetting',
@@ -40,27 +40,27 @@
       Tooltip,
       Dropdown,
       Menu,
-      MenuItem: Menu.Item
+      MenuItem: Menu.Item,
     },
     setup() {
-      const table = useTableContext()
-      const { t } = useI18n()
+      const table = useTableContext();
+      const { t } = useI18n();
 
-      const selectedKeysRef = ref<SizeType[]>([table.getSize()])
+      const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
 
       function handleTitleClick({ key }: { key: SizeType }) {
-        selectedKeysRef.value = [key]
+        selectedKeysRef.value = [key];
         table.setProps({
-          size: key
-        })
+          size: key,
+        });
       }
 
       return {
         handleTitleClick,
         selectedKeysRef,
         getPopupContainer,
-        t
-      }
-    }
-  })
+        t,
+      };
+    },
+  });
 </script>

src/components/Table/src/components/settings/index.vue

@@ -7,17 +7,17 @@
   </div>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue'
-  import type { TableSetting } from '../../types/table'
+  import type { PropType } from 'vue';
+  import type { TableSetting } from '../../types/table';
 
-  import { defineComponent, computed } from 'vue'
+  import { defineComponent, computed } from 'vue';
 
-  import ColumnSetting from './ColumnSetting.vue'
-  import SizeSetting from './SizeSetting.vue'
-  import RedoSetting from './RedoSetting.vue'
-  import FullScreenSetting from './FullScreenSetting.vue'
+  import ColumnSetting from './ColumnSetting.vue';
+  import SizeSetting from './SizeSetting.vue';
+  import RedoSetting from './RedoSetting.vue';
+  import FullScreenSetting from './FullScreenSetting.vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n'
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'TableSetting',
@@ -25,16 +25,16 @@
       ColumnSetting,
       SizeSetting,
       RedoSetting,
-      FullScreenSetting
+      FullScreenSetting,
     },
     props: {
       setting: {
         type: Object as PropType<TableSetting>,
-        default: {}
-      }
+        default: {},
+      },
     },
     setup(props) {
-      const { t } = useI18n()
+      const { t } = useI18n();
 
       const getSetting = computed(
         (): TableSetting => {
@@ -43,14 +43,14 @@
             size: true,
             setting: true,
             fullScreen: false,
-            ...props.setting
-          }
+            ...props.setting,
+          };
         }
-      )
+      );
 
-      return { getSetting, t }
-    }
-  })
+      return { getSetting, t };
+    },
+  });
 </script>
 <style lang="less">
   .table-settings {

src/components/Table/src/const.ts

@@ -1,26 +1,26 @@
-import componentSetting from '/@/settings/componentSetting'
+import componentSetting from '/@/settings/componentSetting';
 
-const { table } = componentSetting
+const { table } = componentSetting;
 
-const { pageSizeOptions, defaultPageSize, fetchSetting, defaultSortFn, defaultFilterFn } = table
+const { pageSizeOptions, defaultPageSize, fetchSetting, defaultSortFn, defaultFilterFn } = table;
 
-export const ROW_KEY = 'key'
+export const ROW_KEY = 'key';
 
 // Optional display number per page;
-export const PAGE_SIZE_OPTIONS = pageSizeOptions
+export const PAGE_SIZE_OPTIONS = pageSizeOptions;
 
 // Number of items displayed per page
-export const PAGE_SIZE = defaultPageSize
+export const PAGE_SIZE = defaultPageSize;
 
 // Common interface field settings
-export const FETCH_SETTING = fetchSetting
+export const FETCH_SETTING = fetchSetting;
 
 // Configure general sort function
-export const DEFAULT_SORT_FN = defaultSortFn
+export const DEFAULT_SORT_FN = defaultSortFn;
 
-export const DEFAULT_FILTER_FN = defaultFilterFn
+export const DEFAULT_FILTER_FN = defaultFilterFn;
 
 //  Default layout of table cells
-export const DEFAULT_ALIGN = 'center'
-export const INDEX_COLUMN_FLAG = 'INDEX'
-export const ACTION_COLUMN_FLAG = 'ACTION'
+export const DEFAULT_ALIGN = 'center';
+export const INDEX_COLUMN_FLAG = 'INDEX';
+export const ACTION_COLUMN_FLAG = 'ACTION';

src/components/Table/src/hooks/useColumns.ts

@@ -1,44 +1,44 @@
-import type { BasicColumn, BasicTableProps, CellFormat, GetColumnsParams } from '../types/table'
-import type { PaginationProps } from '../types/pagination'
-import type { ComputedRef } from 'vue'
+import type { BasicColumn, BasicTableProps, CellFormat, GetColumnsParams } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import type { ComputedRef } from 'vue';
 
-import { unref, Ref, computed, watch, ref, toRaw } from 'vue'
+import { unref, Ref, computed, watch, ref, toRaw } from 'vue';
 
-import { renderEditCell } from '../components/editable'
+import { renderEditCell } from '../components/editable';
 
-import { useI18n } from '/@/hooks/web/useI18n'
+import { useI18n } from '/@/hooks/web/useI18n';
 
-import { isBoolean, isArray, isString, isObject, isFunction } from '/@/utils/is'
-import { isEqual, cloneDeep } from 'lodash-es'
-import { formatToDate } from '/@/utils/dateUtil'
+import { isBoolean, isArray, isString, isObject, isFunction } from '/@/utils/is';
+import { isEqual, cloneDeep } from 'lodash-es';
+import { formatToDate } from '/@/utils/dateUtil';
 
-import { DEFAULT_ALIGN, PAGE_SIZE, INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG } from '../const'
+import { DEFAULT_ALIGN, PAGE_SIZE, INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG } from '../const';
 
 function handleItem(item: BasicColumn, ellipsis: boolean) {
-  const { key, dataIndex, children } = item
-  item.align = item.align || DEFAULT_ALIGN
+  const { key, dataIndex, children } = item;
+  item.align = item.align || DEFAULT_ALIGN;
   if (ellipsis) {
     if (!key) {
-      item.key = dataIndex
+      item.key = dataIndex;
     }
     if (!isBoolean(item.ellipsis)) {
       Object.assign(item, {
-        ellipsis
-      })
+        ellipsis,
+      });
     }
   }
   if (children && children.length) {
-    handleChildren(children, !!ellipsis)
+    handleChildren(children, !!ellipsis);
   }
 }
 
 function handleChildren(children: BasicColumn[] | undefined, ellipsis: boolean) {
-  if (!children) return
-  children.forEach(item => {
-    const { children } = item
-    handleItem(item, ellipsis)
-    handleChildren(children, ellipsis)
-  })
+  if (!children) return;
+  children.forEach((item) => {
+    const { children } = item;
+    handleItem(item, ellipsis);
+    handleChildren(children, ellipsis);
+  });
 }
 
 function handleIndexColumn(
@@ -46,26 +46,26 @@ function handleIndexColumn(
   getPaginationRef: ComputedRef<boolean | PaginationProps>,
   columns: BasicColumn[]
 ) {
-  const { t } = useI18n()
+  const { t } = useI18n();
 
-  const { showIndexColumn, indexColumnProps, isTreeTable } = unref(propsRef)
+  const { showIndexColumn, indexColumnProps, isTreeTable } = unref(propsRef);
 
-  let pushIndexColumns = false
+  let pushIndexColumns = false;
   if (unref(isTreeTable)) {
-    return
+    return;
   }
   columns.forEach(() => {
-    const indIndex = columns.findIndex(column => column.flag === INDEX_COLUMN_FLAG)
+    const indIndex = columns.findIndex((column) => column.flag === INDEX_COLUMN_FLAG);
     if (showIndexColumn) {
-      pushIndexColumns = indIndex === -1
+      pushIndexColumns = indIndex === -1;
     } else if (!showIndexColumn && indIndex !== -1) {
-      columns.splice(indIndex, 1)
+      columns.splice(indIndex, 1);
     }
-  })
+  });
 
-  if (!pushIndexColumns) return
+  if (!pushIndexColumns) return;
 
-  const isFixedLeft = columns.some(item => item.fixed === 'left')
+  const isFixedLeft = columns.some((item) => item.fixed === 'left');
 
   columns.unshift({
     flag: INDEX_COLUMN_FLAG,
@@ -73,34 +73,34 @@ function handleIndexColumn(
     title: t('component.table.index'),
     align: 'center',
     customRender: ({ index }) => {
-      const getPagination = unref(getPaginationRef)
+      const getPagination = unref(getPaginationRef);
       if (isBoolean(getPagination)) {
-        return `${index + 1}`
+        return `${index + 1}`;
       }
-      const { current = 1, pageSize = PAGE_SIZE } = getPagination
-      return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1
+      const { current = 1, pageSize = PAGE_SIZE } = getPagination;
+      return ((current < 1 ? 1 : current) - 1) * pageSize + index + 1;
     },
     ...(isFixedLeft
       ? {
-          fixed: 'left'
+          fixed: 'left',
         }
       : {}),
-    ...indexColumnProps
-  })
+    ...indexColumnProps,
+  });
 }
 
 function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
-  const { actionColumn } = unref(propsRef)
-  if (!actionColumn) return
+  const { actionColumn } = unref(propsRef);
+  if (!actionColumn) return;
 
-  const hasIndex = columns.findIndex(column => column.flag === ACTION_COLUMN_FLAG)
+  const hasIndex = columns.findIndex((column) => column.flag === ACTION_COLUMN_FLAG);
   if (hasIndex === -1) {
     columns.push({
       ...columns[hasIndex],
       fixed: 'right',
       ...actionColumn,
-      flag: ACTION_COLUMN_FLAG
-    })
+      flag: ACTION_COLUMN_FLAG,
+    });
   }
 }
 
@@ -108,107 +108,107 @@ export function useColumns(
   propsRef: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<boolean | PaginationProps>
 ) {
-  const columnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>
-  let cacheColumns = unref(propsRef).columns
+  const columnsRef = (ref(unref(propsRef).columns) as unknown) as Ref<BasicColumn[]>;
+  let cacheColumns = unref(propsRef).columns;
 
   const getColumnsRef = computed(() => {
-    const columns = unref(columnsRef)
+    const columns = unref(columnsRef);
 
-    handleIndexColumn(propsRef, getPaginationRef, columns)
-    handleActionColumn(propsRef, columns)
+    handleIndexColumn(propsRef, getPaginationRef, columns);
+    handleActionColumn(propsRef, columns);
     if (!columns) {
-      return []
+      return [];
     }
-    const { ellipsis } = unref(propsRef)
+    const { ellipsis } = unref(propsRef);
 
-    const cloneColumns = cloneDeep(columns)
-    cloneColumns.forEach(item => {
-      const { customRender, slots } = item
+    const cloneColumns = cloneDeep(columns);
+    cloneColumns.forEach((item) => {
+      const { customRender, slots } = item;
 
       handleItem(
         item,
         Reflect.has(item, 'ellipsis') ? !!item.ellipsis : !!ellipsis && !customRender && !slots
-      )
-    })
-    return cloneColumns
-  })
+      );
+    });
+    return cloneColumns;
+  });
 
   const getViewColumns = computed(() => {
-    const viewColumns = sortFixedColumn(unref(getColumnsRef))
+    const viewColumns = sortFixedColumn(unref(getColumnsRef));
 
-    const columns = cloneDeep(viewColumns)
-    columns.forEach(column => {
-      const { slots, dataIndex, customRender, format, edit, editRow, flag } = column
+    const columns = cloneDeep(viewColumns);
+    columns.forEach((column) => {
+      const { slots, dataIndex, customRender, format, edit, editRow, flag } = column;
 
       if (!slots || !slots?.title) {
-        column.slots = { title: `header-${dataIndex}`, ...(slots || {}) }
-        column.customTitle = column.title
-        Reflect.deleteProperty(column, 'title')
+        column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
+        column.customTitle = column.title;
+        Reflect.deleteProperty(column, 'title');
       }
-      const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!)
+      const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
       if (!customRender && format && !edit && !isDefaultAction) {
         column.customRender = ({ text, record, index }) => {
-          return formatCell(text, format, record, index)
-        }
+          return formatCell(text, format, record, index);
+        };
       }
 
       // edit table
       if ((edit || editRow) && !isDefaultAction) {
-        column.customRender = renderEditCell(column)
+        column.customRender = renderEditCell(column);
       }
-    })
-    return columns
-  })
+    });
+    return columns;
+  });
 
   watch(
     () => unref(propsRef).columns,
-    columns => {
-      columnsRef.value = columns
-      cacheColumns = columns?.filter(item => !item.flag) ?? []
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns?.filter((item) => !item.flag) ?? [];
     }
-  )
+  );
 
   function setCacheColumnsByField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
     if (!dataIndex || !value) {
-      return
+      return;
     }
-    cacheColumns.forEach(item => {
+    cacheColumns.forEach((item) => {
       if (item.dataIndex === dataIndex) {
-        Object.assign(item, value)
-        return
+        Object.assign(item, value);
+        return;
       }
-    })
+    });
   }
   /**
    * set columns
    * @param columnList key｜column
    */
   function setColumns(columnList: Partial<BasicColumn>[] | string[]) {
-    const columns = cloneDeep(columnList)
-    if (!isArray(columns)) return
+    const columns = cloneDeep(columnList);
+    if (!isArray(columns)) return;
 
     if (columns.length <= 0) {
-      columnsRef.value = []
-      return
+      columnsRef.value = [];
+      return;
     }
 
-    const firstColumn = columns[0]
+    const firstColumn = columns[0];
 
-    const cacheKeys = cacheColumns.map(item => item.dataIndex)
+    const cacheKeys = cacheColumns.map((item) => item.dataIndex);
 
     if (!isString(firstColumn)) {
-      columnsRef.value = columns as BasicColumn[]
+      columnsRef.value = columns as BasicColumn[];
     } else {
-      const columnKeys = columns as string[]
-      const newColumns: BasicColumn[] = []
-      cacheColumns.forEach(item => {
+      const columnKeys = columns as string[];
+      const newColumns: BasicColumn[] = [];
+      cacheColumns.forEach((item) => {
         if (columnKeys.includes(item.dataIndex! || (item.key as string))) {
           newColumns.push({
             ...item,
-            defaultHidden: false
-          })
+            defaultHidden: false,
+          });
         }
-      })
+      });
 
       // Sort according to another array
       if (!isEqual(cacheKeys, columns)) {
@@ -216,31 +216,31 @@ export function useColumns(
           return (
             columnKeys.indexOf(prev.dataIndex as string) -
             columnKeys.indexOf(next.dataIndex as string)
-          )
-        })
+          );
+        });
       }
-      columnsRef.value = newColumns
+      columnsRef.value = newColumns;
     }
   }
 
   function getColumns(opt?: GetColumnsParams) {
-    const { ignoreIndex, ignoreAction, sort } = opt || {}
-    let columns = toRaw(unref(getColumnsRef))
+    const { ignoreIndex, ignoreAction, sort } = opt || {};
+    let columns = toRaw(unref(getColumnsRef));
     if (ignoreIndex) {
-      columns = columns.filter(item => item.flag !== INDEX_COLUMN_FLAG)
+      columns = columns.filter((item) => item.flag !== INDEX_COLUMN_FLAG);
     }
     if (ignoreAction) {
-      columns = columns.filter(item => item.flag !== ACTION_COLUMN_FLAG)
+      columns = columns.filter((item) => item.flag !== ACTION_COLUMN_FLAG);
     }
 
     if (sort) {
-      columns = sortFixedColumn(columns)
+      columns = sortFixedColumn(columns);
     }
 
-    return columns
+    return columns;
   }
   function getCacheColumns() {
-    return cacheColumns
+    return cacheColumns;
   }
 
   return {
@@ -249,60 +249,60 @@ export function useColumns(
     getColumns,
     setColumns,
     getViewColumns,
-    setCacheColumnsByField
-  }
+    setCacheColumnsByField,
+  };
 }
 
 function sortFixedColumn(columns: BasicColumn[]) {
-  const fixedLeftColumns: BasicColumn[] = []
-  const fixedRightColumns: BasicColumn[] = []
-  const defColumns: BasicColumn[] = []
+  const fixedLeftColumns: BasicColumn[] = [];
+  const fixedRightColumns: BasicColumn[] = [];
+  const defColumns: BasicColumn[] = [];
   for (const column of columns) {
     if (column.fixed === 'left') {
-      fixedLeftColumns.push(column)
-      continue
+      fixedLeftColumns.push(column);
+      continue;
     }
     if (column.fixed === 'right') {
-      fixedRightColumns.push(column)
-      continue
+      fixedRightColumns.push(column);
+      continue;
     }
-    defColumns.push(column)
+    defColumns.push(column);
   }
   const resultColumns = [...fixedLeftColumns, ...defColumns, ...fixedRightColumns].filter(
-    item => !item.defaultHidden
-  )
+    (item) => !item.defaultHidden
+  );
 
-  return resultColumns
+  return resultColumns;
 }
 
 // format cell
 export function formatCell(text: string, format: CellFormat, record: Recordable, index: number) {
   if (!format) {
-    return text
+    return text;
   }
 
   // custom function
   if (isFunction(format)) {
-    return format(text, record, index)
+    return format(text, record, index);
   }
 
   try {
     // date type
-    const DATE_FORMAT_PREFIX = 'date|'
+    const DATE_FORMAT_PREFIX = 'date|';
     if (isString(format) && format.startsWith(DATE_FORMAT_PREFIX)) {
-      const dateFormat = format.replace(DATE_FORMAT_PREFIX, '')
+      const dateFormat = format.replace(DATE_FORMAT_PREFIX, '');
 
       if (!dateFormat) {
-        return text
+        return text;
       }
-      return formatToDate(text, dateFormat)
+      return formatToDate(text, dateFormat);
     }
 
     // enum
     if (isObject(format) && Reflect.has(format, 'size')) {
-      return format.get(text)
+      return format.get(text);
     }
   } catch (error) {
-    return text
+    return text;
   }
 }

src/components/Table/src/hooks/useCustomRow.ts

@@ -1,15 +1,15 @@
-import type { ComputedRef } from 'vue'
-import type { BasicTableProps } from '../types/table'
-import { unref } from 'vue'
-import { ROW_KEY } from '../const'
-import { isString, isFunction } from '/@/utils/is'
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import { unref } from 'vue';
+import { ROW_KEY } from '../const';
+import { isString, isFunction } from '/@/utils/is';
 
 interface Options {
-  setSelectedRowKeys: (keys: string[]) => void
-  getSelectRowKeys: () => string[]
-  clearSelectedRowKeys: () => void
-  emit: EmitType
-  getAutoCreateKey: ComputedRef<boolean | undefined>
+  setSelectedRowKeys: (keys: string[]) => void;
+  getSelectRowKeys: () => string[];
+  clearSelectedRowKeys: () => void;
+  emit: EmitType;
+  getAutoCreateKey: ComputedRef<boolean | undefined>;
 }
 
 function getKey(
@@ -18,15 +18,15 @@ function getKey(
   autoCreateKey?: boolean
 ) {
   if (!rowKey || autoCreateKey) {
-    return record[ROW_KEY]
+    return record[ROW_KEY];
   }
   if (isString(rowKey)) {
-    return record[rowKey]
+    return record[rowKey];
   }
   if (isFunction(rowKey)) {
-    return record[rowKey(record)]
+    return record[rowKey(record)];
   }
-  return null
+  return null;
 }
 
 export function useCustomRow(
@@ -36,54 +36,54 @@ export function useCustomRow(
   const customRow = (record: Recordable, index: number) => {
     return {
       onClick: (e: Event) => {
-        emit('row-click', record, index, e)
-        e?.stopPropagation()
-        const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef)
-        if (!rowSelection || !clickToRowSelect) return
-        const keys = getSelectRowKeys()
-        const key = getKey(record, rowKey, unref(getAutoCreateKey))
-        if (!key) return
+        emit('row-click', record, index, e);
+        e?.stopPropagation();
+        const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
+        if (!rowSelection || !clickToRowSelect) return;
+        const keys = getSelectRowKeys();
+        const key = getKey(record, rowKey, unref(getAutoCreateKey));
+        if (!key) return;
 
-        const isCheckbox = rowSelection.type === 'checkbox'
+        const isCheckbox = rowSelection.type === 'checkbox';
         if (isCheckbox) {
           if (!keys.includes(key)) {
-            setSelectedRowKeys([...keys, key])
-            return
+            setSelectedRowKeys([...keys, key]);
+            return;
           }
-          const keyIndex = keys.findIndex(item => item === key)
-          keys.splice(keyIndex, 1)
-          setSelectedRowKeys(keys)
-          return
+          const keyIndex = keys.findIndex((item) => item === key);
+          keys.splice(keyIndex, 1);
+          setSelectedRowKeys(keys);
+          return;
         }
 
-        const isRadio = rowSelection.type === 'radio'
+        const isRadio = rowSelection.type === 'radio';
         if (isRadio) {
           if (!keys.includes(key)) {
             if (keys.length) {
-              clearSelectedRowKeys()
+              clearSelectedRowKeys();
             }
-            setSelectedRowKeys([key])
-            return
+            setSelectedRowKeys([key]);
+            return;
           }
-          clearSelectedRowKeys()
+          clearSelectedRowKeys();
         }
       },
       onDblclick: (event: Event) => {
-        emit('row-dbClick', record, index, event)
+        emit('row-dbClick', record, index, event);
       },
       onContextmenu: (event: Event) => {
-        emit('row-contextmenu', record, index, event)
+        emit('row-contextmenu', record, index, event);
       },
       onMouseenter: (event: Event) => {
-        emit('row-mouseenter', record, index, event)
+        emit('row-mouseenter', record, index, event);
       },
       onMouseleave: (event: Event) => {
-        emit('row-mouseleave', record, index, event)
-      }
-    }
-  }
+        emit('row-mouseleave', record, index, event);
+      },
+    };
+  };
 
   return {
-    customRow
-  }
+    customRow,
+  };
 }

src/components/Table/src/hooks/useDataSource.ts

@@ -1,5 +1,5 @@
-import type { BasicTableProps, FetchParams, SorterResult } from '../types/table'
-import type { PaginationProps } from '../types/pagination'
+import type { BasicTableProps, FetchParams, SorterResult } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
 
 import {
   ref,
@@ -10,29 +10,29 @@ import {
   watch,
   reactive,
   Ref,
-  watchEffect
-} from 'vue'
+  watchEffect,
+} from 'vue';
 
-import { useTimeoutFn } from '/@/hooks/core/useTimeout'
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
-import { buildUUID } from '/@/utils/uuid'
-import { isFunction, isBoolean } from '/@/utils/is'
-import { get, cloneDeep } from 'lodash-es'
+import { buildUUID } from '/@/utils/uuid';
+import { isFunction, isBoolean } from '/@/utils/is';
+import { get, cloneDeep } from 'lodash-es';
 
-import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const'
+import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
 
 interface ActionType {
-  getPaginationInfo: ComputedRef<boolean | PaginationProps>
-  setPagination: (info: Partial<PaginationProps>) => void
-  setLoading: (loading: boolean) => void
-  getFieldsValue: () => Recordable
-  clearSelectedRowKeys: () => void
-  tableData: Ref<Recordable[]>
+  getPaginationInfo: ComputedRef<boolean | PaginationProps>;
+  setPagination: (info: Partial<PaginationProps>) => void;
+  setLoading: (loading: boolean) => void;
+  getFieldsValue: () => Recordable;
+  clearSelectedRowKeys: () => void;
+  tableData: Ref<Recordable[]>;
 }
 
 interface SearchState {
-  sortInfo: Recordable
-  filterInfo: Record<string, string[]>
+  sortInfo: Recordable;
+  filterInfo: Record<string, string[]>;
 }
 export function useDataSource(
   propsRef: ComputedRef<BasicTableProps>,
@@ -42,111 +42,111 @@ export function useDataSource(
     setLoading,
     getFieldsValue,
     clearSelectedRowKeys,
-    tableData
+    tableData,
   }: ActionType,
   emit: EmitType
 ) {
   const searchState = reactive<SearchState>({
     sortInfo: {},
-    filterInfo: {}
-  })
-  const dataSourceRef = ref<Recordable[]>([])
+    filterInfo: {},
+  });
+  const dataSourceRef = ref<Recordable[]>([]);
 
   watchEffect(() => {
-    tableData.value = unref(dataSourceRef)
-  })
+    tableData.value = unref(dataSourceRef);
+  });
 
   watch(
     () => unref(propsRef).dataSource,
     () => {
-      const { dataSource, api } = unref(propsRef)
-      !api && dataSource && (dataSourceRef.value = dataSource)
+      const { dataSource, api } = unref(propsRef);
+      !api && dataSource && (dataSourceRef.value = dataSource);
     },
     {
-      immediate: true
+      immediate: true,
     }
-  )
+  );
 
   function handleTableChange(
     pagination: PaginationProps,
     filters: Partial<Recordable<string[]>>,
     sorter: SorterResult
   ) {
-    const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef)
+    const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef);
     if (clearSelectOnPageChange) {
-      clearSelectedRowKeys()
+      clearSelectedRowKeys();
     }
-    setPagination(pagination)
+    setPagination(pagination);
 
-    const params: Recordable = {}
+    const params: Recordable = {};
     if (sorter && isFunction(sortFn)) {
-      const sortInfo = sortFn(sorter)
-      searchState.sortInfo = sortInfo
-      params.sortInfo = sortInfo
+      const sortInfo = sortFn(sorter);
+      searchState.sortInfo = sortInfo;
+      params.sortInfo = sortInfo;
     }
 
     if (filters && isFunction(filterFn)) {
-      const filterInfo = filterFn(filters)
-      searchState.filterInfo = filterInfo
-      params.filterInfo = filterInfo
+      const filterInfo = filterFn(filters);
+      searchState.filterInfo = filterInfo;
+      params.filterInfo = filterInfo;
     }
-    fetch(params)
+    fetch(params);
   }
 
   function setTableKey(items: any[]) {
-    if (!items || !Array.isArray(items)) return
-    items.forEach(item => {
+    if (!items || !Array.isArray(items)) return;
+    items.forEach((item) => {
       if (!item[ROW_KEY]) {
-        item[ROW_KEY] = buildUUID()
+        item[ROW_KEY] = buildUUID();
       }
       if (item.children && item.children.length) {
-        setTableKey(item.children)
+        setTableKey(item.children);
       }
-    })
+    });
   }
 
   const getAutoCreateKey = computed(() => {
-    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey
-  })
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
 
   const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef)
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey
-  })
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
 
   const getDataSourceRef = computed(() => {
-    const dataSource = unref(dataSourceRef)
+    const dataSource = unref(dataSourceRef);
     if (!dataSource || dataSource.length === 0) {
-      return []
+      return [];
     }
     if (unref(getAutoCreateKey)) {
-      const firstItem = dataSource[0]
-      const lastItem = dataSource[dataSource.length - 1]
+      const firstItem = dataSource[0];
+      const lastItem = dataSource[dataSource.length - 1];
 
       if (firstItem && lastItem) {
         if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
-          const data = cloneDeep(unref(dataSourceRef))
-          data.forEach(item => {
+          const data = cloneDeep(unref(dataSourceRef));
+          data.forEach((item) => {
             if (!item[ROW_KEY]) {
-              item[ROW_KEY] = buildUUID()
+              item[ROW_KEY] = buildUUID();
             }
             if (item.children && item.children.length) {
-              setTableKey(item.children)
+              setTableKey(item.children);
             }
-          })
-          dataSourceRef.value = data
+          });
+          dataSourceRef.value = data;
         }
       }
     }
-    return unref(dataSourceRef)
-  })
+    return unref(dataSourceRef);
+  });
 
   async function updateTableData(index: number, key: string, value: any) {
-    const record = dataSourceRef.value[index]
+    const record = dataSourceRef.value[index];
     if (record) {
-      dataSourceRef.value[index][key] = value
+      dataSourceRef.value[index][key] = value;
     }
-    return dataSourceRef.value[index]
+    return dataSourceRef.value[index];
   }
 
   async function fetch(opt?: FetchParams) {
@@ -157,24 +157,24 @@ export function useDataSource(
       beforeFetch,
       afterFetch,
       useSearchForm,
-      pagination
-    } = unref(propsRef)
-    if (!api || !isFunction(api)) return
+      pagination,
+    } = unref(propsRef);
+    if (!api || !isFunction(api)) return;
     try {
-      setLoading(true)
-      const { pageField, sizeField, listField, totalField } = fetchSetting || FETCH_SETTING
-      let pageParams: Recordable = {}
+      setLoading(true);
+      const { pageField, sizeField, listField, totalField } = fetchSetting || FETCH_SETTING;
+      let pageParams: Recordable = {};
 
-      const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo) as PaginationProps
+      const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo) as PaginationProps;
 
       if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
-        pageParams = {}
+        pageParams = {};
       } else {
-        pageParams[pageField] = (opt && opt.page) || current
-        pageParams[sizeField] = pageSize
+        pageParams[pageField] = (opt && opt.page) || current;
+        pageParams[sizeField] = pageSize;
       }
 
-      const { sortInfo = {}, filterInfo } = searchState
+      const { sortInfo = {}, filterInfo } = searchState;
 
       let params: Recordable = {
         ...pageParams,
@@ -184,74 +184,74 @@ export function useDataSource(
         ...sortInfo,
         ...filterInfo,
         ...(opt?.sortInfo ?? {}),
-        ...(opt?.filterInfo ?? {})
-      }
+        ...(opt?.filterInfo ?? {}),
+      };
       if (beforeFetch && isFunction(beforeFetch)) {
-        params = beforeFetch(params) || params
+        params = beforeFetch(params) || params;
       }
 
-      const res = await api(params)
+      const res = await api(params);
 
-      const isArrayResult = Array.isArray(res)
+      const isArrayResult = Array.isArray(res);
 
-      let resultItems: Recordable[] = isArrayResult ? res : get(res, listField)
-      const resultTotal: number = isArrayResult ? 0 : get(res, totalField)
+      let resultItems: Recordable[] = isArrayResult ? res : get(res, listField);
+      const resultTotal: number = isArrayResult ? 0 : get(res, totalField);
 
       // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
       if (resultTotal) {
-        const currentTotalPage = Math.ceil(resultTotal / pageSize)
+        const currentTotalPage = Math.ceil(resultTotal / pageSize);
         if (current > currentTotalPage) {
           setPagination({
-            current: currentTotalPage
-          })
-          fetch(opt)
+            current: currentTotalPage,
+          });
+          fetch(opt);
         }
       }
 
       if (afterFetch && isFunction(afterFetch)) {
-        resultItems = afterFetch(resultItems) || resultItems
+        resultItems = afterFetch(resultItems) || resultItems;
       }
-      dataSourceRef.value = resultItems
+      dataSourceRef.value = resultItems;
       setPagination({
-        total: resultTotal || 0
-      })
+        total: resultTotal || 0,
+      });
       if (opt && opt.page) {
         setPagination({
-          current: opt.page || 1
-        })
+          current: opt.page || 1,
+        });
       }
       emit('fetch-success', {
         items: unref(resultItems),
-        total: resultTotal
-      })
+        total: resultTotal,
+      });
     } catch (error) {
-      emit('fetch-error', error)
-      dataSourceRef.value = []
+      emit('fetch-error', error);
+      dataSourceRef.value = [];
       setPagination({
-        total: 0
-      })
+        total: 0,
+      });
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
   function setTableData<T = Recordable>(values: T[]) {
-    dataSourceRef.value = values
+    dataSourceRef.value = values;
   }
 
   function getDataSource<T = Recordable>() {
-    return getDataSourceRef.value as T[]
+    return getDataSourceRef.value as T[];
   }
 
   async function reload(opt?: FetchParams) {
-    await fetch(opt)
+    await fetch(opt);
   }
 
   onMounted(() => {
     useTimeoutFn(() => {
-      unref(propsRef).immediate && fetch()
-    }, 16)
-  })
+      unref(propsRef).immediate && fetch();
+    }, 16);
+  });
 
   return {
     getDataSourceRef,
@@ -262,6 +262,6 @@ export function useDataSource(
     fetch,
     reload,
     updateTableData,
-    handleTableChange
-  }
+    handleTableChange,
+  };
 }

src/components/Table/src/hooks/useLoading.ts

@@ -1,21 +1,21 @@
-import { ref, ComputedRef, unref, computed, watch } from 'vue'
-import type { BasicTableProps } from '../types/table'
+import { ref, ComputedRef, unref, computed, watch } from 'vue';
+import type { BasicTableProps } from '../types/table';
 
 export function useLoading(props: ComputedRef<BasicTableProps>) {
-  const loadingRef = ref(unref(props).loading)
+  const loadingRef = ref(unref(props).loading);
 
   watch(
     () => unref(props).loading,
-    loading => {
-      loadingRef.value = loading
+    (loading) => {
+      loadingRef.value = loading;
     }
-  )
+  );
 
-  const getLoading = computed(() => unref(loadingRef))
+  const getLoading = computed(() => unref(loadingRef));
 
   function setLoading(loading: boolean) {
-    loadingRef.value = loading
+    loadingRef.value = loading;
   }
 
-  return { getLoading, setLoading }
+  return { getLoading, setLoading };
 }

src/components/Table/src/hooks/usePagination.tsx

@@ -1,40 +1,40 @@
-import type { PaginationProps } from '../types/pagination'
-import type { BasicTableProps } from '../types/table'
+import type { PaginationProps } from '../types/pagination';
+import type { BasicTableProps } from '../types/table';
 
-import { computed, unref, ref, ComputedRef } from 'vue'
-import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
+import { computed, unref, ref, ComputedRef } from 'vue';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
 
-import { isBoolean } from '/@/utils/is'
+import { isBoolean } from '/@/utils/is';
 
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const'
-import { useI18n } from '/@/hooks/web/useI18n'
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 interface ItemRender {
-  page: number
-  type: 'page' | 'prev' | 'next'
-  originalElement: any
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
 }
 
 function itemRender({ page, type, originalElement }: ItemRender) {
   if (type === 'prev') {
-    return page === 0 ? null : <LeftOutlined />
+    return page === 0 ? null : <LeftOutlined />;
   } else if (type === 'next') {
-    return page === 1 ? null : <RightOutlined />
+    return page === 1 ? null : <RightOutlined />;
   }
-  return originalElement
+  return originalElement;
 }
 
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
-  const { t } = useI18n()
+  const { t } = useI18n();
 
-  const configRef = ref<PaginationProps>({})
-  const show = ref(true)
+  const configRef = ref<PaginationProps>({});
+  const show = ref(true);
 
   const getPaginationInfo = computed((): PaginationProps | boolean => {
-    const { pagination } = unref(refProps)
+    const { pagination } = unref(refProps);
 
     if (!unref(show) || (isBoolean(pagination) && !pagination)) {
-      return false
+      return false;
     }
 
     return {
@@ -42,35 +42,35 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
       pageSize: PAGE_SIZE,
       size: 'small',
       defaultPageSize: PAGE_SIZE,
-      showTotal: total => t('component.table.total', { total }),
+      showTotal: (total) => t('component.table.total', { total }),
       showSizeChanger: true,
       pageSizeOptions: PAGE_SIZE_OPTIONS,
       itemRender: itemRender,
       showQuickJumper: true,
       ...(isBoolean(pagination) ? {} : pagination),
-      ...unref(configRef)
-    }
-  })
+      ...unref(configRef),
+    };
+  });
 
   function setPagination(info: Partial<PaginationProps>) {
-    const paginationInfo = unref(getPaginationInfo)
+    const paginationInfo = unref(getPaginationInfo);
     configRef.value = {
       ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
-      ...info
-    }
+      ...info,
+    };
   }
 
   function getPagination() {
-    return unref(getPaginationInfo)
+    return unref(getPaginationInfo);
   }
 
   function getShowPagination() {
-    return unref(show)
+    return unref(show);
   }
 
   async function setShowPagination(flag: boolean) {
-    show.value = flag
+    show.value = flag;
   }
 
-  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination }
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
 }

src/components/Table/src/hooks/useRowSelection.ts

@@ -1,83 +1,83 @@
-import type { BasicTableProps, TableRowSelection } from '../types/table'
+import type { BasicTableProps, TableRowSelection } from '../types/table';
 
-import { computed, ref, unref, ComputedRef, Ref, toRaw } from 'vue'
-import { ROW_KEY } from '../const'
+import { computed, ref, unref, ComputedRef, Ref, toRaw } from 'vue';
+import { ROW_KEY } from '../const';
 
 export function useRowSelection(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
   emit: EmitType
 ) {
-  const selectedRowKeysRef = ref<string[]>([])
-  const selectedRowRef = ref<Recordable[]>([])
+  const selectedRowKeysRef = ref<string[]>([]);
+  const selectedRowRef = ref<Recordable[]>([]);
 
   const getRowSelectionRef = computed((): TableRowSelection | null => {
-    const { rowSelection } = unref(propsRef)
+    const { rowSelection } = unref(propsRef);
     if (!rowSelection) {
-      return null
+      return null;
     }
 
     return {
       selectedRowKeys: unref(selectedRowKeysRef),
       hideDefaultSelections: false,
       onChange: (selectedRowKeys: string[], selectedRows: Recordable[]) => {
-        selectedRowKeysRef.value = selectedRowKeys
-        selectedRowRef.value = selectedRows
+        selectedRowKeysRef.value = selectedRowKeys;
+        selectedRowRef.value = selectedRows;
         emit('selection-change', {
           keys: selectedRowKeys,
-          rows: selectedRows
-        })
+          rows: selectedRows,
+        });
       },
-      ...(rowSelection === undefined ? {} : rowSelection)
-    }
-  })
+      ...(rowSelection === undefined ? {} : rowSelection),
+    };
+  });
 
   const getAutoCreateKey = computed(() => {
-    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey
-  })
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
 
   const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef)
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey
-  })
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
 
   function setSelectedRowKeys(rowKeys: string[]) {
-    selectedRowKeysRef.value = rowKeys
+    selectedRowKeysRef.value = rowKeys;
 
-    const rows = toRaw(unref(tableData)).filter(item =>
+    const rows = toRaw(unref(tableData)).filter((item) =>
       rowKeys.includes(item[unref(getRowKey) as string])
-    )
-    selectedRowRef.value = rows
+    );
+    selectedRowRef.value = rows;
   }
 
   function setSelectedRows(rows: Recordable[]) {
-    selectedRowRef.value = rows
+    selectedRowRef.value = rows;
   }
 
   function clearSelectedRowKeys() {
-    selectedRowRef.value = []
-    selectedRowKeysRef.value = []
+    selectedRowRef.value = [];
+    selectedRowKeysRef.value = [];
   }
 
   function deleteSelectRowByKey(key: string) {
-    const selectedRowKeys = unref(selectedRowKeysRef)
-    const index = selectedRowKeys.findIndex(item => item === key)
+    const selectedRowKeys = unref(selectedRowKeysRef);
+    const index = selectedRowKeys.findIndex((item) => item === key);
     if (index !== -1) {
-      unref(selectedRowKeysRef).splice(index, 1)
+      unref(selectedRowKeysRef).splice(index, 1);
     }
   }
 
   function getSelectRowKeys() {
-    return unref(selectedRowKeysRef)
+    return unref(selectedRowKeysRef);
   }
 
   function getSelectRows<T = Recordable>() {
     // const ret = toRaw(unref(selectedRowRef)).map((item) => toRaw(item));
-    return unref(selectedRowRef) as T[]
+    return unref(selectedRowRef) as T[];
   }
 
   function getRowSelection() {
-    return unref(getRowSelectionRef)!
+    return unref(getRowSelectionRef)!;
   }
 
   return {
@@ -88,6 +88,6 @@ export function useRowSelection(
     setSelectedRowKeys,
     clearSelectedRowKeys,
     deleteSelectRowByKey,
-    setSelectedRows
-  }
+    setSelectedRows,
+  };
 }

src/components/Table/src/hooks/useTable.ts

@@ -1,144 +1,144 @@
-import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table'
-import type { PaginationProps } from '../types/pagination'
-import type { DynamicProps } from '/#/utils'
-import type { FormActionType } from '/@/components/Form'
-import type { WatchStopHandle } from 'vue'
+import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
+import type { PaginationProps } from '../types/pagination';
+import type { DynamicProps } from '/#/utils';
+import type { FormActionType } from '/@/components/Form';
+import type { WatchStopHandle } from 'vue';
 
-import { getDynamicProps } from '/@/utils'
-import { ref, onUnmounted, unref, watch, toRaw } from 'vue'
-import { isProdMode } from '/@/utils/env'
-import { error } from '/@/utils/log'
+import { getDynamicProps } from '/@/utils';
+import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
+import { isProdMode } from '/@/utils/env';
+import { error } from '/@/utils/log';
 
-type Props = Partial<DynamicProps<BasicTableProps>>
+type Props = Partial<DynamicProps<BasicTableProps>>;
 
 type UseTableMethod = TableActionType & {
-  getForm: () => FormActionType
-}
+  getForm: () => FormActionType;
+};
 
 export function useTable(
   tableProps?: Props
 ): [(instance: TableActionType, formInstance: UseTableMethod) => void, TableActionType] {
-  const tableRef = ref<Nullable<TableActionType>>(null)
-  const loadedRef = ref<Nullable<boolean>>(false)
-  const formRef = ref<Nullable<UseTableMethod>>(null)
+  const tableRef = ref<Nullable<TableActionType>>(null);
+  const loadedRef = ref<Nullable<boolean>>(false);
+  const formRef = ref<Nullable<UseTableMethod>>(null);
 
-  let stopWatch: WatchStopHandle
+  let stopWatch: WatchStopHandle;
 
   function register(instance: TableActionType, formInstance: UseTableMethod) {
     isProdMode() &&
       onUnmounted(() => {
-        tableRef.value = null
-        loadedRef.value = null
-      })
+        tableRef.value = null;
+        loadedRef.value = null;
+      });
 
-    if (unref(loadedRef) && isProdMode() && instance === unref(tableRef)) return
+    if (unref(loadedRef) && isProdMode() && instance === unref(tableRef)) return;
 
-    tableRef.value = instance
-    formRef.value = formInstance
-    tableProps && instance.setProps(getDynamicProps(tableProps))
-    loadedRef.value = true
+    tableRef.value = instance;
+    formRef.value = formInstance;
+    tableProps && instance.setProps(getDynamicProps(tableProps));
+    loadedRef.value = true;
 
-    stopWatch?.()
+    stopWatch?.();
 
     stopWatch = watch(
       () => tableProps,
       () => {
-        tableProps && instance.setProps(getDynamicProps(tableProps))
+        tableProps && instance.setProps(getDynamicProps(tableProps));
       },
       {
         immediate: true,
-        deep: true
+        deep: true,
       }
-    )
+    );
   }
 
   function getTableInstance(): TableActionType {
-    const table = unref(tableRef)
+    const table = unref(tableRef);
     if (!table) {
       error(
         'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
-      )
+      );
     }
-    return table as TableActionType
+    return table as TableActionType;
   }
 
   const methods: TableActionType & {
-    getForm: () => FormActionType
+    getForm: () => FormActionType;
   } = {
     reload: async (opt?: FetchParams) => {
-      getTableInstance().reload(opt)
+      getTableInstance().reload(opt);
     },
     setProps: (props: Partial<BasicTableProps>) => {
-      getTableInstance().setProps(props)
+      getTableInstance().setProps(props);
     },
     redoHeight: () => {
-      getTableInstance().redoHeight()
+      getTableInstance().redoHeight();
     },
     setLoading: (loading: boolean) => {
-      getTableInstance().setLoading(loading)
+      getTableInstance().setLoading(loading);
     },
     getDataSource: () => {
-      return toRaw(getTableInstance().getDataSource())
+      return toRaw(getTableInstance().getDataSource());
     },
     getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
-      const columns = getTableInstance().getColumns({ ignoreIndex }) || []
-      return toRaw(columns)
+      const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
+      return toRaw(columns);
     },
     setColumns: (columns: BasicColumn[]) => {
-      getTableInstance().setColumns(columns)
+      getTableInstance().setColumns(columns);
     },
     setTableData: (values: any[]) => {
-      return getTableInstance().setTableData(values)
+      return getTableInstance().setTableData(values);
     },
     setPagination: (info: Partial<PaginationProps>) => {
-      return getTableInstance().setPagination(info)
+      return getTableInstance().setPagination(info);
     },
     deleteSelectRowByKey: (key: string) => {
-      getTableInstance().deleteSelectRowByKey(key)
+      getTableInstance().deleteSelectRowByKey(key);
     },
     getSelectRowKeys: () => {
-      return toRaw(getTableInstance().getSelectRowKeys())
+      return toRaw(getTableInstance().getSelectRowKeys());
     },
     getSelectRows: () => {
-      return toRaw(getTableInstance().getSelectRows())
+      return toRaw(getTableInstance().getSelectRows());
     },
     clearSelectedRowKeys: () => {
-      getTableInstance().clearSelectedRowKeys()
+      getTableInstance().clearSelectedRowKeys();
     },
     setSelectedRowKeys: (keys: string[] | number[]) => {
-      getTableInstance().setSelectedRowKeys(keys)
+      getTableInstance().setSelectedRowKeys(keys);
     },
     getPaginationRef: () => {
-      return getTableInstance().getPaginationRef()
+      return getTableInstance().getPaginationRef();
     },
     getSize: () => {
-      return toRaw(getTableInstance().getSize())
+      return toRaw(getTableInstance().getSize());
     },
     updateTableData: (index: number, key: string, value: any) => {
-      return getTableInstance().updateTableData(index, key, value)
+      return getTableInstance().updateTableData(index, key, value);
     },
     getRowSelection: () => {
-      return toRaw(getTableInstance().getRowSelection())
+      return toRaw(getTableInstance().getRowSelection());
     },
     getCacheColumns: () => {
-      return toRaw(getTableInstance().getCacheColumns())
+      return toRaw(getTableInstance().getCacheColumns());
     },
     getForm: () => {
-      return (unref(formRef) as unknown) as FormActionType
+      return (unref(formRef) as unknown) as FormActionType;
     },
     setShowPagination: async (show: boolean) => {
-      getTableInstance().setShowPagination(show)
+      getTableInstance().setShowPagination(show);
     },
     getShowPagination: () => {
-      return toRaw(getTableInstance().getShowPagination())
+      return toRaw(getTableInstance().getShowPagination());
     },
     expandAll: () => {
-      getTableInstance().expandAll()
+      getTableInstance().expandAll();
     },
     collapseAll: () => {
-      getTableInstance().collapseAll()
-    }
-  }
+      getTableInstance().collapseAll();
+    },
+  };
 
-  return [register, methods]
+  return [register, methods];
 }

src/components/Table/src/hooks/useTableContext.ts

@@ -1,23 +1,23 @@
-import type { Ref } from 'vue'
-import type { BasicTableProps, TableActionType } from '../types/table'
+import type { Ref } from 'vue';
+import type { BasicTableProps, TableActionType } from '../types/table';
 
-import { provide, inject, ComputedRef } from 'vue'
+import { provide, inject, ComputedRef } from 'vue';
 
-const key = Symbol('basic-table')
+const key = Symbol('basic-table');
 
 type Instance = TableActionType & {
-  wrapRef: Ref<Nullable<HTMLElement>>
-  getBindValues: ComputedRef<Recordable>
-}
+  wrapRef: Ref<Nullable<HTMLElement>>;
+  getBindValues: ComputedRef<Recordable>;
+};
 
 type RetInstance = Omit<Instance, 'getBindValues'> & {
-  getBindValues: ComputedRef<BasicTableProps>
-}
+  getBindValues: ComputedRef<BasicTableProps>;
+};
 
 export function createTableContext(instance: Instance) {
-  provide(key, instance)
+  provide(key, instance);
 }
 
 export function useTableContext(): RetInstance {
-  return inject(key) as RetInstance
+  return inject(key) as RetInstance;
 }

src/components/Table/src/hooks/useTableExpand.ts

@@ -1,59 +1,59 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { BasicTableProps } from '../types/table'
+import type { ComputedRef, Ref } from 'vue';
+import type { BasicTableProps } from '../types/table';
 
-import { computed, unref, ref, toRaw } from 'vue'
-import { ROW_KEY } from '../const'
+import { computed, unref, ref, toRaw } from 'vue';
+import { ROW_KEY } from '../const';
 
 export function useTableExpand(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
   emit: EmitType
 ) {
-  const expandedRowKeys = ref<string[]>([])
+  const expandedRowKeys = ref<string[]>([]);
 
   const getAutoCreateKey = computed(() => {
-    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey
-  })
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
 
   const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef)
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey
-  })
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
 
   const getExpandOption = computed(() => {
-    const { isTreeTable } = unref(propsRef)
-    if (!isTreeTable) return {}
+    const { isTreeTable } = unref(propsRef);
+    if (!isTreeTable) return {};
 
     return {
       expandedRowKeys: unref(expandedRowKeys),
       onExpandedRowsChange: (keys: string[]) => {
-        expandedRowKeys.value = keys
-        emit('expanded-rows-change', keys)
-      }
-    }
-  })
+        expandedRowKeys.value = keys;
+        emit('expanded-rows-change', keys);
+      },
+    };
+  });
 
   function expandAll() {
-    const keys = getAllKeys()
-    expandedRowKeys.value = keys
+    const keys = getAllKeys();
+    expandedRowKeys.value = keys;
   }
 
   function getAllKeys(data?: Recordable[]) {
-    const keys: string[] = []
-    const { childrenColumnName } = unref(propsRef)
-    toRaw(data || unref(tableData)).forEach(item => {
-      keys.push(item[unref(getRowKey) as string])
-      const children = item[childrenColumnName || 'children']
+    const keys: string[] = [];
+    const { childrenColumnName } = unref(propsRef);
+    toRaw(data || unref(tableData)).forEach((item) => {
+      keys.push(item[unref(getRowKey) as string]);
+      const children = item[childrenColumnName || 'children'];
       if (children?.length) {
-        keys.push(...getAllKeys(children))
+        keys.push(...getAllKeys(children));
       }
-    })
-    return keys
+    });
+    return keys;
   }
 
   function collapseAll() {
-    expandedRowKeys.value = []
+    expandedRowKeys.value = [];
   }
 
-  return { getExpandOption, expandAll, collapseAll }
+  return { getExpandOption, expandAll, collapseAll };
 }

src/components/Table/src/hooks/useTableFooter.ts

@@ -1,57 +1,57 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { BasicTableProps } from '../types/table'
-import { unref, computed, h, nextTick, watchEffect } from 'vue'
-import TableFooter from '../components/TableFooter.vue'
-import { useEventListener } from '/@/hooks/event/useEventListener'
+import type { ComputedRef, Ref } from 'vue';
+import type { BasicTableProps } from '../types/table';
+import { unref, computed, h, nextTick, watchEffect } from 'vue';
+import TableFooter from '../components/TableFooter.vue';
+import { useEventListener } from '/@/hooks/event/useEventListener';
 
 export function useTableFooter(
   propsRef: ComputedRef<BasicTableProps>,
   scrollRef: ComputedRef<{
-    x: string | number | true
-    y: Nullable<number>
-    scrollToFirstRowOnChange: boolean
+    x: string | number | true;
+    y: Nullable<number>;
+    scrollToFirstRowOnChange: boolean;
   }>,
   tableElRef: Ref<ComponentRef>,
   getDataSourceRef: ComputedRef<Recordable>
 ) {
   const getIsEmptyData = computed(() => {
-    return (unref(getDataSourceRef) || []).length === 0
-  })
+    return (unref(getDataSourceRef) || []).length === 0;
+  });
 
   const getFooterProps = computed((): Recordable | undefined => {
-    const { summaryFunc, showSummary, summaryData } = unref(propsRef)
+    const { summaryFunc, showSummary, summaryData } = unref(propsRef);
     return showSummary && !unref(getIsEmptyData)
       ? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) })
-      : undefined
-  })
+      : undefined;
+  });
 
   watchEffect(() => {
-    handleSummary()
-  })
+    handleSummary();
+  });
 
   function handleSummary() {
-    const { showSummary } = unref(propsRef)
-    if (!showSummary || unref(getIsEmptyData)) return
+    const { showSummary } = unref(propsRef);
+    if (!showSummary || unref(getIsEmptyData)) return;
 
     nextTick(() => {
-      const tableEl = unref(tableElRef)
-      if (!tableEl) return
-      const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body')
-      const bodyDom = bodyDomList[0]
+      const tableEl = unref(tableElRef);
+      if (!tableEl) return;
+      const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body');
+      const bodyDom = bodyDomList[0];
       useEventListener({
         el: bodyDom,
         name: 'scroll',
         listener: () => {
           const footerBodyDom = tableEl.$el.querySelector(
             '.ant-table-footer .ant-table-body'
-          ) as HTMLDivElement
-          if (!footerBodyDom || !bodyDom) return
-          footerBodyDom.scrollLeft = bodyDom.scrollLeft
+          ) as HTMLDivElement;
+          if (!footerBodyDom || !bodyDom) return;
+          footerBodyDom.scrollLeft = bodyDom.scrollLeft;
         },
         wait: 0,
-        options: true
-      })
-    })
+        options: true,
+      });
+    });
   }
-  return { getFooterProps }
+  return { getFooterProps };
 }

src/components/Table/src/hooks/useTableForm.ts

@@ -1,8 +1,8 @@
-import type { ComputedRef, Slots } from 'vue'
-import type { BasicTableProps, FetchParams } from '../types/table'
-import { unref, computed } from 'vue'
-import type { FormProps } from '/@/components/Form'
-import { isFunction } from '/@/utils/is'
+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps, FetchParams } from '../types/table';
+import { unref, computed } from 'vue';
+import type { FormProps } from '/@/components/Form';
+import { isFunction } from '/@/utils/is';
 export function useTableForm(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
@@ -10,37 +10,37 @@ export function useTableForm(
 ) {
   const getFormProps = computed(
     (): Partial<FormProps> => {
-      const { formConfig } = unref(propsRef)
+      const { formConfig } = unref(propsRef);
       return {
         showAdvancedButton: true,
         ...formConfig,
-        compact: true
-      }
+        compact: true,
+      };
     }
-  )
+  );
 
   const getFormSlotKeys = computed(() => {
-    const keys = Object.keys(slots)
-    return keys.map(item => (item.startsWith('form-') ? item : null)).filter(Boolean)
-  })
+    const keys = Object.keys(slots);
+    return keys.map((item) => (item.startsWith('form-') ? item : null)).filter(Boolean);
+  });
 
   function replaceFormSlotKey(key: string) {
-    if (!key) return ''
-    return key?.replace?.(/form\-/, '') ?? ''
+    if (!key) return '';
+    return key?.replace?.(/form\-/, '') ?? '';
   }
 
   function handleSearchInfoChange(info: Recordable) {
-    const { handleSearchInfoFn } = unref(propsRef)
+    const { handleSearchInfoFn } = unref(propsRef);
     if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
-      info = handleSearchInfoFn(info) || info
+      info = handleSearchInfoFn(info) || info;
     }
-    fetch({ searchInfo: info, page: 1 })
+    fetch({ searchInfo: info, page: 1 });
   }
 
   return {
     getFormProps,
     replaceFormSlotKey,
     getFormSlotKeys,
-    handleSearchInfoChange
-  }
+    handleSearchInfoChange,
+  };
 }

src/components/Table/src/hooks/useTableHeader.ts

@@ -1,19 +1,19 @@
-import type { ComputedRef, Slots } from 'vue'
-import type { BasicTableProps } from '../types/table'
+import type { ComputedRef, Slots } from 'vue';
+import type { BasicTableProps } from '../types/table';
 
-import { unref, computed, h } from 'vue'
-import TableHeader from '../components/TableHeader.vue'
+import { unref, computed, h } from 'vue';
+import TableHeader from '../components/TableHeader.vue';
 
-import { isString } from '/@/utils/is'
-import { getSlot } from '/@/utils/helper/tsxHelper'
+import { isString } from '/@/utils/is';
+import { getSlot } from '/@/utils/helper/tsxHelper';
 
 export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Slots) {
   const getHeaderProps = computed(
     (): Recordable => {
-      const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef)
-      const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting
+      const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
+      const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting;
       if (hideTitle && !isString(title)) {
-        return {}
+        return {};
       }
 
       return {
@@ -26,23 +26,23 @@ export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Sl
                   title,
                   titleHelpMessage,
                   showTableSetting,
-                  tableSetting
+                  tableSetting,
                 },
                 {
                   ...(slots.toolbar
                     ? {
-                        toolbar: () => getSlot(slots, 'toolbar')
+                        toolbar: () => getSlot(slots, 'toolbar'),
                       }
                     : {}),
                   ...(slots.tableTitle
                     ? {
-                        tableTitle: () => getSlot(slots, 'tableTitle')
+                        tableTitle: () => getSlot(slots, 'tableTitle'),
                       }
-                    : {})
+                    : {}),
                 }
-              )
-      }
+              ),
+      };
     }
-  )
-  return { getHeaderProps }
+  );
+  return { getHeaderProps };
 }

src/components/Table/src/hooks/useTableScroll.ts

@@ -1,15 +1,15 @@
-import type { BasicTableProps, TableRowSelection } from '../types/table'
-import type { Ref, ComputedRef } from 'vue'
-import { computed, unref, ref, nextTick, watch } from 'vue'
+import type { BasicTableProps, TableRowSelection } from '../types/table';
+import type { Ref, ComputedRef } from 'vue';
+import { computed, unref, ref, nextTick, watch } from 'vue';
 
-import { getViewportOffset } from '/@/utils/domUtils'
-import { isBoolean } from '/@/utils/is'
+import { getViewportOffset } from '/@/utils/domUtils';
+import { isBoolean } from '/@/utils/is';
 
-import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'
-import { useModalContext } from '/@/components/Modal'
-import { useDebounce } from '/@/hooks/core/useDebounce'
-import type { BasicColumn } from '/@/components/Table'
-import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated'
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+import { useModalContext } from '/@/components/Modal';
+import { useDebounce } from '/@/hooks/core/useDebounce';
+import type { BasicColumn } from '/@/components/Table';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
 
 export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
@@ -18,103 +18,103 @@ export function useTableScroll(
   rowSelectionRef: ComputedRef<TableRowSelection<any> | null>,
   getDataSourceRef: ComputedRef<Recordable[]>
 ) {
-  const tableHeightRef: Ref<Nullable<number>> = ref(null)
+  const tableHeightRef: Ref<Nullable<number>> = ref(null);
 
-  const modalFn = useModalContext()
+  const modalFn = useModalContext();
 
   // Greater than animation time 280
-  const [debounceRedoHeight] = useDebounce(redoHeight, 100)
+  const [debounceRedoHeight] = useDebounce(redoHeight, 100);
 
   const getCanResize = computed(() => {
-    const { canResize, scroll } = unref(propsRef)
-    return canResize && !(scroll || {}).y
-  })
+    const { canResize, scroll } = unref(propsRef);
+    return canResize && !(scroll || {}).y;
+  });
 
   watch(
     () => [unref(getCanResize), unref(getDataSourceRef)?.length],
     () => {
-      debounceRedoHeight()
+      debounceRedoHeight();
     },
     {
-      flush: 'post'
+      flush: 'post',
     }
-  )
+  );
 
   function redoHeight() {
     nextTick(() => {
-      calcTableHeight()
-    })
+      calcTableHeight();
+    });
   }
 
   function setHeight(heigh: number) {
-    tableHeightRef.value = heigh
+    tableHeightRef.value = heigh;
     //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
-    modalFn?.redoModalHeight?.()
+    modalFn?.redoModalHeight?.();
   }
 
   // No need to repeat queries
-  let paginationEl: HTMLElement | null
-  let footerEl: HTMLElement | null
-  let bodyEl: HTMLElement | null
+  let paginationEl: HTMLElement | null;
+  let footerEl: HTMLElement | null;
+  let bodyEl: HTMLElement | null;
 
   async function calcTableHeight() {
-    const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef)
-    const tableData = unref(getDataSourceRef)
+    const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
+    const tableData = unref(getDataSourceRef);
 
-    const table = unref(tableElRef)
-    if (!table) return
+    const table = unref(tableElRef);
+    if (!table) return;
 
-    const tableEl: Element = table.$el
-    if (!tableEl) return
+    const tableEl: Element = table.$el;
+    if (!tableEl) return;
 
     if (!bodyEl) {
-      bodyEl = tableEl.querySelector('.ant-table-body')
+      bodyEl = tableEl.querySelector('.ant-table-body');
     }
 
-    bodyEl!.style.height = 'unset'
+    bodyEl!.style.height = 'unset';
 
-    if (!unref(getCanResize) || tableData.length === 0) return
+    if (!unref(getCanResize) || tableData.length === 0) return;
 
-    await nextTick()
+    await nextTick();
     //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
 
-    const headEl = tableEl.querySelector('.ant-table-thead ')
+    const headEl = tableEl.querySelector('.ant-table-thead ');
 
-    if (!headEl) return
+    if (!headEl) return;
 
     // Table height from bottom
-    const { bottomIncludeBody } = getViewportOffset(headEl)
+    const { bottomIncludeBody } = getViewportOffset(headEl);
     // Table height from bottom height-custom offset
 
-    const paddingHeight = 32
+    const paddingHeight = 32;
     // Pager height
-    let paginationHeight = 2
+    let paginationHeight = 2;
     if (!isBoolean(pagination)) {
-      paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement
+      paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
       if (paginationEl) {
-        const offsetHeight = paginationEl.offsetHeight
-        paginationHeight += offsetHeight || 0
+        const offsetHeight = paginationEl.offsetHeight;
+        paginationHeight += offsetHeight || 0;
       } else {
         // TODO First fix 24
-        paginationHeight += 24
+        paginationHeight += 24;
       }
     } else {
-      paginationHeight = -8
+      paginationHeight = -8;
     }
 
-    let footerHeight = 0
+    let footerHeight = 0;
     if (!isBoolean(pagination)) {
       if (!footerEl) {
-        footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement
+        footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
       } else {
-        const offsetHeight = footerEl.offsetHeight
-        footerHeight += offsetHeight || 0
+        const offsetHeight = footerEl.offsetHeight;
+        footerHeight += offsetHeight || 0;
       }
     }
 
-    let headerHeight = 0
+    let headerHeight = 0;
     if (headEl) {
-      headerHeight = (headEl as HTMLElement).offsetHeight
+      headerHeight = (headEl as HTMLElement).offsetHeight;
     }
 
     let height =
@@ -123,56 +123,56 @@ export function useTableScroll(
       paddingHeight -
       paginationHeight -
       footerHeight -
-      headerHeight
+      headerHeight;
 
-    height = (height > maxHeight! ? (maxHeight as number) : height) ?? height
-    setHeight(height)
+    height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
+    setHeight(height);
 
-    bodyEl!.style.height = `${height}px`
+    bodyEl!.style.height = `${height}px`;
   }
-  useWindowSizeFn(calcTableHeight, 280)
+  useWindowSizeFn(calcTableHeight, 280);
   onMountedOrActivated(() => {
-    calcTableHeight()
+    calcTableHeight();
     nextTick(() => {
-      debounceRedoHeight()
-    })
-  })
+      debounceRedoHeight();
+    });
+  });
 
   const getScrollX = computed(() => {
-    let width = 0
+    let width = 0;
     if (unref(rowSelectionRef)) {
-      width += 60
+      width += 60;
     }
 
     // TODO props ?? 0;
-    const NORMAL_WIDTH = 150
+    const NORMAL_WIDTH = 150;
 
-    const columns = unref(columnsRef).filter(item => !item.defaultHidden)
-    columns.forEach(item => {
-      width += Number.parseInt(item.width as string) || 0
-    })
-    const unsetWidthColumns = columns.filter(item => !Reflect.has(item, 'width'))
+    const columns = unref(columnsRef).filter((item) => !item.defaultHidden);
+    columns.forEach((item) => {
+      width += Number.parseInt(item.width as string) || 0;
+    });
+    const unsetWidthColumns = columns.filter((item) => !Reflect.has(item, 'width'));
 
-    const len = unsetWidthColumns.length
+    const len = unsetWidthColumns.length;
     if (len !== 0) {
-      width += len * NORMAL_WIDTH
+      width += len * NORMAL_WIDTH;
     }
 
-    const table = unref(tableElRef)
-    const tableWidth = table?.$el?.offsetWidth ?? 0
-    return tableWidth > width ? '100%' : width
-  })
+    const table = unref(tableElRef);
+    const tableWidth = table?.$el?.offsetWidth ?? 0;
+    return tableWidth > width ? '100%' : width;
+  });
 
   const getScrollRef = computed(() => {
-    const tableHeight = unref(tableHeightRef)
-    const { canResize, scroll } = unref(propsRef)
+    const tableHeight = unref(tableHeightRef);
+    const { canResize, scroll } = unref(propsRef);
     return {
       x: unref(getScrollX),
       y: canResize ? tableHeight : null,
       scrollToFirstRowOnChange: false,
-      ...scroll
-    }
-  })
+      ...scroll,
+    };
+  });
 
-  return { getScrollRef, redoHeight }
+  return { getScrollRef, redoHeight };
 }

src/components/Table/src/hooks/useTableStyle.ts

@@ -1,19 +1,19 @@
-import type { ComputedRef } from 'vue'
-import type { BasicTableProps, TableCustomRecord } from '../types/table'
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps, TableCustomRecord } from '../types/table';
 
-import { unref } from 'vue'
-import { isFunction } from '/@/utils/is'
+import { unref } from 'vue';
+import { isFunction } from '/@/utils/is';
 export function useTableStyle(propsRef: ComputedRef<BasicTableProps>, prefixCls: string) {
   function getRowClassName(record: TableCustomRecord, index: number) {
-    const { striped, rowClassName } = unref(propsRef)
-    if (!striped) return
+    const { striped, rowClassName } = unref(propsRef);
+    if (!striped) return;
     if (rowClassName && isFunction(rowClassName)) {
-      return rowClassName(record)
+      return rowClassName(record);
     }
-    return (index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : ''
+    return (index || 0) % 2 === 1 ? `${prefixCls}-row__striped` : '';
   }
 
   return {
-    getRowClassName
-  }
+    getRowClassName,
+  };
 }

src/components/Table/src/props.ts

@@ -1,16 +1,16 @@
-import type { PropType } from 'vue'
-import type { PaginationProps } from './types/pagination'
+import type { PropType } from 'vue';
+import type { PaginationProps } from './types/pagination';
 import type {
   BasicColumn,
   FetchSetting,
   TableSetting,
   SorterResult,
   TableCustomRecord,
-  TableRowSelection
-} from './types/table'
-import type { FormProps } from '/@/components/Form'
-import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING } from './const'
-import { propTypes } from '/@/utils/propTypes'
+  TableRowSelection,
+} from './types/table';
+import type { FormProps } from '/@/components/Form';
+import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING } from './const';
+import { propTypes } from '/@/utils/propTypes';
 
 export const basicProps = {
   clickToRowSelect: propTypes.bool.def(true),
@@ -19,11 +19,11 @@ export const basicProps = {
   inset: propTypes.bool,
   sortFn: {
     type: Function as PropType<(sortInfo: SorterResult) => any>,
-    default: DEFAULT_SORT_FN
+    default: DEFAULT_SORT_FN,
   },
   filterFn: {
     type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
-    default: DEFAULT_FILTER_FN
+    default: DEFAULT_FILTER_FN,
   },
   showTableSetting: propTypes.bool,
   autoCreateKey: propTypes.bool.def(true),
@@ -31,35 +31,35 @@ export const basicProps = {
   showSummary: propTypes.bool,
   summaryFunc: {
     type: [Function, Array] as PropType<(...arg: any[]) => any[]>,
-    default: null
+    default: null,
   },
   summaryData: {
     type: Array as PropType<Recordable[]>,
-    default: null
+    default: null,
   },
   indentSize: propTypes.number.def(24),
   canColDrag: propTypes.bool.def(true),
   api: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
-    default: null
+    default: null,
   },
   beforeFetch: {
     type: Function as PropType<Fn>,
-    default: null
+    default: null,
   },
   afterFetch: {
     type: Function as PropType<Fn>,
-    default: null
+    default: null,
   },
   handleSearchInfoFn: {
     type: Function as PropType<Fn>,
-    default: null
+    default: null,
   },
   fetchSetting: {
     type: Object as PropType<FetchSetting>,
     default: () => {
-      return FETCH_SETTING
-    }
+      return FETCH_SETTING;
+    },
   },
   // 立即请求接口
   immediate: propTypes.bool.def(true),
@@ -67,27 +67,27 @@ export const basicProps = {
   // 额外的请求参数
   searchInfo: {
     type: Object as PropType<Recordable>,
-    default: null
+    default: null,
   },
   // 使用搜索表单
   useSearchForm: propTypes.bool,
   // 表单配置
   formConfig: {
     type: Object as PropType<Partial<FormProps>>,
-    default: null
+    default: null,
   },
   columns: {
     type: [Array] as PropType<BasicColumn[]>,
-    default: () => []
+    default: () => [],
   },
   showIndexColumn: propTypes.bool.def(true),
   indexColumnProps: {
     type: Object as PropType<BasicColumn>,
-    default: null
+    default: null,
   },
   actionColumn: {
     type: Object as PropType<BasicColumn>,
-    default: null
+    default: null,
   },
   ellipsis: propTypes.bool.def(true),
   canResize: propTypes.bool.def(true),
@@ -95,35 +95,35 @@ export const basicProps = {
   resizeHeightOffset: propTypes.number.def(0),
   rowSelection: {
     type: Object as PropType<TableRowSelection | null>,
-    default: null
+    default: null,
   },
   title: {
     type: [String, Function] as PropType<string | ((data: Recordable) => string)>,
-    default: null
+    default: null,
   },
   titleHelpMessage: {
-    type: [String, Array] as PropType<string | string[]>
+    type: [String, Array] as PropType<string | string[]>,
   },
   maxHeight: propTypes.number,
   dataSource: {
     type: Array as PropType<Recordable[]>,
-    default: null
+    default: null,
   },
   rowKey: {
     type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
-    default: ''
+    default: '',
   },
   bordered: propTypes.bool,
   pagination: {
     type: [Object, Boolean] as PropType<PaginationProps | boolean>,
-    default: null
+    default: null,
   },
   loading: propTypes.bool,
   rowClassName: {
-    type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>
+    type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
   },
   scroll: {
     type: Object as PropType<{ x: number | true; y: number }>,
-    default: null
-  }
-}
+    default: null,
+  },
+};

src/components/Table/src/types/column.ts

@@ -1,31 +1,31 @@
-import { VNodeChild } from 'vue'
+import { VNodeChild } from 'vue';
 
 export interface ColumnFilterItem {
-  text?: string
-  value?: string
-  children?: any
+  text?: string;
+  value?: string;
+  children?: any;
 }
 
-export declare type SortOrder = 'ascend' | 'descend'
+export declare type SortOrder = 'ascend' | 'descend';
 
 export interface RecordProps<T> {
-  text: any
-  record: T
-  index: number
+  text: any;
+  record: T;
+  index: number;
 }
 
 export interface FilterDropdownProps {
-  prefixCls?: string
-  setSelectedKeys?: (selectedKeys: string[]) => void
-  selectedKeys?: string[]
-  confirm?: () => void
-  clearFilters?: () => void
-  filters?: ColumnFilterItem[]
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement
-  visible?: boolean
+  prefixCls?: string;
+  setSelectedKeys?: (selectedKeys: string[]) => void;
+  selectedKeys?: string[];
+  confirm?: () => void;
+  clearFilters?: () => void;
+  filters?: ColumnFilterItem[];
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  visible?: boolean;
 }
 
-export declare type CustomRenderFunction<T> = (record: RecordProps<T>) => VNodeChild | JSX.Element
+export declare type CustomRenderFunction<T> = (record: RecordProps<T>) => VNodeChild | JSX.Element;
 
 export interface ColumnProps<T> {
   /**
@@ -33,7 +33,7 @@ export interface ColumnProps<T> {
    * @default 'left'
    * @type string
    */
-  align?: 'left' | 'right' | 'center'
+  align?: 'left' | 'right' | 'center';
 
   /**
    * ellipsize cell content, not working with sorter and filters for now.
@@ -41,31 +41,31 @@ export interface ColumnProps<T> {
    * @default false
    * @type boolean
    */
-  ellipsis?: boolean
+  ellipsis?: boolean;
 
   /**
    * Span of this column's title
    * @type number
    */
-  colSpan?: number
+  colSpan?: number;
 
   /**
    * Display field of the data record, could be set like a.b.c
    * @type string
    */
-  dataIndex?: string
+  dataIndex?: string;
 
   /**
    * Default filtered values
    * @type string[]
    */
-  defaultFilteredValue?: string[]
+  defaultFilteredValue?: string[];
 
   /**
    * Default order of sorted values: 'ascend' 'descend' null
    * @type string
    */
-  defaultSortOrder?: SortOrder
+  defaultSortOrder?: SortOrder;
 
   /**
    * Customized filter overlay
@@ -74,125 +74,125 @@ export interface ColumnProps<T> {
   filterDropdown?:
     | VNodeChild
     | JSX.Element
-    | ((props: FilterDropdownProps) => VNodeChild | JSX.Element)
+    | ((props: FilterDropdownProps) => VNodeChild | JSX.Element);
 
   /**
    * Whether filterDropdown is visible
    * @type boolean
    */
-  filterDropdownVisible?: boolean
+  filterDropdownVisible?: boolean;
 
   /**
    * Whether the dataSource is filtered
    * @default false
    * @type boolean
    */
-  filtered?: boolean
+  filtered?: boolean;
 
   /**
    * Controlled filtered value, filter icon will highlight
    * @type string[]
    */
-  filteredValue?: string[]
+  filteredValue?: string[];
 
   /**
    * Customized filter icon
    * @default false
    * @type any
    */
-  filterIcon?: boolean | VNodeChild | JSX.Element
+  filterIcon?: boolean | VNodeChild | JSX.Element;
 
   /**
    * Whether multiple filters can be selected
    * @default true
    * @type boolean
    */
-  filterMultiple?: boolean
+  filterMultiple?: boolean;
 
   /**
    * Filter menu config
    * @type object[]
    */
-  filters?: ColumnFilterItem[]
+  filters?: ColumnFilterItem[];
 
   /**
    * Set column to be fixed: true(same as left) 'left' 'right'
    * @default false
    * @type boolean | string
    */
-  fixed?: boolean | 'left' | 'right'
+  fixed?: boolean | 'left' | 'right';
 
   /**
    * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
    * @type string
    */
-  key?: string
+  key?: string;
 
   /**
    * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
    * @type Function | ScopedSlot
    */
-  customRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element
+  customRender?: CustomRenderFunction<T> | VNodeChild | JSX.Element;
 
   /**
    * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
    * @type boolean | Function
    */
-  sorter?: boolean | Function
+  sorter?: boolean | Function;
 
   /**
    * Order of sorted values: 'ascend' 'descend' false
    * @type boolean | string
    */
-  sortOrder?: boolean | SortOrder
+  sortOrder?: boolean | SortOrder;
 
   /**
    * supported sort way, could be 'ascend', 'descend'
    * @default ['ascend', 'descend']
    * @type string[]
    */
-  sortDirections?: SortOrder[]
+  sortDirections?: SortOrder[];
 
   /**
    * Title of this column
    * @type any (string | slot)
    */
-  title?: VNodeChild | JSX.Element
+  title?: VNodeChild | JSX.Element;
 
   /**
    * Width of this column
    * @type string | number
    */
-  width?: string | number
+  width?: string | number;
 
   /**
    * Set props on per cell
    * @type Function
    */
-  customCell?: (record: T, rowIndex: number) => object
+  customCell?: (record: T, rowIndex: number) => object;
 
   /**
    * Set props on per header cell
    * @type object
    */
-  customHeaderCell?: (column: ColumnProps<T>) => object
+  customHeaderCell?: (column: ColumnProps<T>) => object;
 
   /**
    * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
    * @type Function
    */
-  onFilter?: (value: any, record: T) => boolean
+  onFilter?: (value: any, record: T) => boolean;
 
   /**
    * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx
    * @type Function
    */
-  onFilterDropdownVisibleChange?: (visible: boolean) => void
+  onFilterDropdownVisibleChange?: (visible: boolean) => void;
 
   /**
    * When using columns, you can setting this property to configure the properties that support the slot,
    * such as slots: { filterIcon: 'XXX'}
    * @type object
    */
-  slots?: Recordable<string>
+  slots?: Recordable<string>;
 }

src/components/Table/src/types/componentType.ts

@@ -1 +1,7 @@
-export type ComponentType = 'Input' | 'InputNumber' | 'Select' | 'ApiSelect' | 'Checkbox' | 'Switch'
+export type ComponentType =
+  | 'Input'
+  | 'InputNumber'
+  | 'Select'
+  | 'ApiSelect'
+  | 'Checkbox'
+  | 'Switch';

src/components/Table/src/types/pagination.ts

@@ -1,14 +1,14 @@
-import Pagination from 'ant-design-vue/lib/pagination'
-import { VNodeChild } from 'vue'
+import Pagination from 'ant-design-vue/lib/pagination';
+import { VNodeChild } from 'vue';
 
 interface PaginationRenderProps {
-  page: number
-  type: 'page' | 'prev' | 'next'
-  originalElement: any
+  page: number;
+  type: 'page' | 'prev' | 'next';
+  originalElement: any;
 }
 
 export declare class PaginationConfig extends Pagination {
-  position?: 'top' | 'bottom' | 'both'
+  position?: 'top' | 'bottom' | 'both';
 }
 export interface PaginationProps {
   /**
@@ -16,84 +16,84 @@ export interface PaginationProps {
    * @default 0
    * @type number
    */
-  total?: number
+  total?: number;
 
   /**
    * default initial page number
    * @default 1
    * @type number
    */
-  defaultCurrent?: number
+  defaultCurrent?: number;
 
   /**
    * current page number
    * @type number
    */
-  current?: number
+  current?: number;
 
   /**
    * default number of data items per page
    * @default 10
    * @type number
    */
-  defaultPageSize?: number
+  defaultPageSize?: number;
 
   /**
    * number of data items per page
    * @type number
    */
-  pageSize?: number
+  pageSize?: number;
 
   /**
    * Whether to hide pager on single page
    * @default false
    * @type boolean
    */
-  hideOnSinglePage?: boolean
+  hideOnSinglePage?: boolean;
 
   /**
    * determine whether pageSize can be changed
    * @default false
    * @type boolean
    */
-  showSizeChanger?: boolean
+  showSizeChanger?: boolean;
 
   /**
    * specify the sizeChanger options
    * @default ['10', '20', '30', '40']
    * @type string[]
    */
-  pageSizeOptions?: string[]
+  pageSizeOptions?: string[];
 
   /**
    * determine whether you can jump to pages directly
    * @default false
    * @type boolean
    */
-  showQuickJumper?: boolean | object
+  showQuickJumper?: boolean | object;
 
   /**
    * to display the total number and range
    * @type Function
    */
-  showTotal?: (total: number, range: [number, number]) => any
+  showTotal?: (total: number, range: [number, number]) => any;
 
   /**
    * specify the size of Pagination, can be set to small
    * @default ''
    * @type string
    */
-  size?: string
+  size?: string;
 
   /**
    * whether to setting simple mode
    * @type boolean
    */
-  simple?: boolean
+  simple?: boolean;
 
   /**
    * to customize item innerHTML
    * @type Function
    */
-  itemRender?: (props: PaginationRenderProps) => VNodeChild | JSX.Element
+  itemRender?: (props: PaginationRenderProps) => VNodeChild | JSX.Element;
 }

src/components/Table/src/types/table.ts

@@ -1,18 +1,18 @@
-import type { VNodeChild } from 'vue'
-import type { PaginationProps } from './pagination'
-import type { FormProps } from '/@/components/Form'
+import type { VNodeChild } from 'vue';
+import type { PaginationProps } from './pagination';
+import type { FormProps } from '/@/components/Form';
 import type {
   ColumnProps,
-  TableRowSelection as ITableRowSelection
-} from 'ant-design-vue/lib/table/interface'
+  TableRowSelection as ITableRowSelection,
+} from 'ant-design-vue/lib/table/interface';
 
-import { ComponentType } from './componentType'
-import { VueNode } from '/@/utils/propTypes'
+import { ComponentType } from './componentType';
+import { VueNode } from '/@/utils/propTypes';
 
-export declare type SortOrder = 'ascend' | 'descend'
+export declare type SortOrder = 'ascend' | 'descend';
 
 export interface TableCurrentDataSource<T = Recordable> {
-  currentDataSource: T[]
+  currentDataSource: T[];
 }
 
 export interface TableRowSelection<T = any> extends ITableRowSelection {
@@ -20,278 +20,278 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
    * Callback executed when selected rows change
    * @type Function
    */
-  onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any
+  onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any;
 
   /**
    * Callback executed when select/deselect one row
    * @type FunctionT
    */
-  onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any
+  onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
 
   /**
    * Callback executed when select/deselect all rows
    * @type Function
    */
-  onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any
+  onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any;
 
   /**
    * Callback executed when row selection is inverted
    * @type Function
    */
-  onSelectInvert?: (selectedRows: string[] | number[]) => any
+  onSelectInvert?: (selectedRows: string[] | number[]) => any;
 }
 
 export interface TableCustomRecord<T> {
-  record?: T
-  index?: number
+  record?: T;
+  index?: number;
 }
 
 export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> {
-  indent?: number
-  expanded?: boolean
+  indent?: number;
+  expanded?: boolean;
 }
 export interface ColumnFilterItem {
-  text?: string
-  value?: string
-  children?: any
+  text?: string;
+  value?: string;
+  children?: any;
 }
 
 export interface TableCustomRecord<T = Recordable> {
-  record?: T
-  index?: number
+  record?: T;
+  index?: number;
 }
 
 export interface SorterResult {
-  column: ColumnProps
-  order: SortOrder
-  field: string
-  columnKey: string
+  column: ColumnProps;
+  order: SortOrder;
+  field: string;
+  columnKey: string;
 }
 
 export interface FetchParams {
-  searchInfo?: Recordable
-  page?: number
-  sortInfo?: Recordable
-  filterInfo?: Recordable
+  searchInfo?: Recordable;
+  page?: number;
+  sortInfo?: Recordable;
+  filterInfo?: Recordable;
 }
 
 export interface GetColumnsParams {
-  ignoreIndex?: boolean
-  ignoreAction?: boolean
-  sort?: boolean
+  ignoreIndex?: boolean;
+  ignoreAction?: boolean;
+  sort?: boolean;
 }
 
-export type SizeType = 'default' | 'middle' | 'small' | 'large'
+export type SizeType = 'default' | 'middle' | 'small' | 'large';
 
 export interface TableActionType {
-  reload: (opt?: FetchParams) => Promise<void>
-  getSelectRows: <T = Recordable>() => T[]
-  clearSelectedRowKeys: () => void
-  expandAll: () => void
-  collapseAll: () => void
-  getSelectRowKeys: () => string[]
-  deleteSelectRowByKey: (key: string) => void
-  setPagination: (info: Partial<PaginationProps>) => void
-  setTableData: <T = Recordable>(values: T[]) => void
-  getColumns: (opt?: GetColumnsParams) => BasicColumn[]
-  setColumns: (columns: BasicColumn[] | string[]) => void
-  getDataSource: <T = Recordable>() => T[]
-  setLoading: (loading: boolean) => void
-  setProps: (props: Partial<BasicTableProps>) => void
-  redoHeight: () => void
-  setSelectedRowKeys: (rowKeys: string[] | number[]) => void
-  getPaginationRef: () => PaginationProps | boolean
-  getSize: () => SizeType
-  getRowSelection: () => TableRowSelection<Recordable>
-  getCacheColumns: () => BasicColumn[]
-  emit?: EmitType
-  updateTableData: (index: number, key: string, value: any) => Recordable
-  setShowPagination: (show: boolean) => Promise<void>
-  getShowPagination: () => boolean
-  setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
+  reload: (opt?: FetchParams) => Promise<void>;
+  getSelectRows: <T = Recordable>() => T[];
+  clearSelectedRowKeys: () => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  getSelectRowKeys: () => string[];
+  deleteSelectRowByKey: (key: string) => void;
+  setPagination: (info: Partial<PaginationProps>) => void;
+  setTableData: <T = Recordable>(values: T[]) => void;
+  getColumns: (opt?: GetColumnsParams) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
+  getDataSource: <T = Recordable>() => T[];
+  setLoading: (loading: boolean) => void;
+  setProps: (props: Partial<BasicTableProps>) => void;
+  redoHeight: () => void;
+  setSelectedRowKeys: (rowKeys: string[] | number[]) => void;
+  getPaginationRef: () => PaginationProps | boolean;
+  getSize: () => SizeType;
+  getRowSelection: () => TableRowSelection<Recordable>;
+  getCacheColumns: () => BasicColumn[];
+  emit?: EmitType;
+  updateTableData: (index: number, key: string, value: any) => Recordable;
+  setShowPagination: (show: boolean) => Promise<void>;
+  getShowPagination: () => boolean;
+  setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void;
 }
 
 export interface FetchSetting {
   // 请求接口当前页数
-  pageField: string
+  pageField: string;
   // 每页显示多少条
-  sizeField: string
+  sizeField: string;
   // 请求结果列表字段  支持 a.b.c
-  listField: string
+  listField: string;
   // 请求结果总数字段  支持 a.b.c
-  totalField: string
+  totalField: string;
 }
 
 export interface TableSetting {
-  redo?: boolean
-  size?: boolean
-  setting?: boolean
-  fullScreen?: boolean
+  redo?: boolean;
+  size?: boolean;
+  setting?: boolean;
+  fullScreen?: boolean;
 }
 
 export interface BasicTableProps<T = any> {
   // 点击行选中
-  clickToRowSelect?: boolean
-  isTreeTable?: boolean
+  clickToRowSelect?: boolean;
+  isTreeTable?: boolean;
   // 自定义排序方法
-  sortFn?: (sortInfo: SorterResult) => any
+  sortFn?: (sortInfo: SorterResult) => any;
   // 排序方法
-  filterFn?: (data: Partial<Recordable<string[]>>) => any
+  filterFn?: (data: Partial<Recordable<string[]>>) => any;
   // 取消表格的默认padding
-  inset?: boolean
+  inset?: boolean;
   // 显示表格设置
-  showTableSetting?: boolean
-  tableSetting?: TableSetting
+  showTableSetting?: boolean;
+  tableSetting?: TableSetting;
   // 斑马纹
-  striped?: boolean
+  striped?: boolean;
   // 是否自动生成key
-  autoCreateKey?: boolean
+  autoCreateKey?: boolean;
   // 计算合计行的方法
-  summaryFunc?: (...arg: any) => Recordable[]
+  summaryFunc?: (...arg: any) => Recordable[];
   // 自定义合计表格内容
-  summaryData?: Recordable[]
+  summaryData?: Recordable[];
   // 是否显示合计行
-  showSummary?: boolean
+  showSummary?: boolean;
   // 是否可拖拽列
-  canColDrag?: boolean
+  canColDrag?: boolean;
   // 接口请求对象
-  api?: (...arg: any) => Promise<any>
+  api?: (...arg: any) => Promise<any>;
   // 请求之前处理参数
-  beforeFetch?: Fn
+  beforeFetch?: Fn;
   // 自定义处理接口返回参数
-  afterFetch?: Fn
+  afterFetch?: Fn;
   // 查询条件请求之前处理
-  handleSearchInfoFn?: Fn
+  handleSearchInfoFn?: Fn;
   // 请求接口配置
-  fetchSetting?: FetchSetting
+  fetchSetting?: FetchSetting;
   // 立即请求接口
-  immediate?: boolean
+  immediate?: boolean;
   // 在开起搜索表单的时候，如果没有数据是否显示表格
-  emptyDataIsShowTable?: boolean
+  emptyDataIsShowTable?: boolean;
   // 额外的请求参数
-  searchInfo?: Recordable
+  searchInfo?: Recordable;
   // 使用搜索表单
-  useSearchForm?: boolean
+  useSearchForm?: boolean;
   // 表单配置
-  formConfig?: Partial<FormProps>
+  formConfig?: Partial<FormProps>;
   // 列配置
-  columns: BasicColumn[]
+  columns: BasicColumn[];
   // 是否显示序号列
-  showIndexColumn?: boolean
+  showIndexColumn?: boolean;
   // 序号列配置
-  indexColumnProps?: BasicColumn
-  actionColumn?: BasicColumn
+  indexColumnProps?: BasicColumn;
+  actionColumn?: BasicColumn;
   // 文本超过宽度是否显示。。。
-  ellipsis?: boolean
+  ellipsis?: boolean;
   // 是否可以自适应高度
-  canResize?: boolean
+  canResize?: boolean;
   // 自适应高度偏移， 计算结果-偏移量
-  resizeHeightOffset?: number
+  resizeHeightOffset?: number;
 
   // 在分页改变的时候清空选项
-  clearSelectOnPageChange?: boolean
+  clearSelectOnPageChange?: boolean;
   //
-  rowKey?: string | ((record: Recordable) => string)
+  rowKey?: string | ((record: Recordable) => string);
   // 数据
-  dataSource?: Recordable[]
+  dataSource?: Recordable[];
   // 标题右侧提示
-  titleHelpMessage?: string | string[]
+  titleHelpMessage?: string | string[];
   // 表格滚动最大高度
-  maxHeight?: number
+  maxHeight?: number;
   // 是否显示边框
-  bordered?: boolean
+  bordered?: boolean;
   // 分页配置
-  pagination?: PaginationProps | boolean
+  pagination?: PaginationProps | boolean;
   // loading加载
-  loading?: boolean
+  loading?: boolean;
 
   /**
    * The column contains children to display
    * @default 'children'
    * @type string | string[]
    */
-  childrenColumnName?: string
+  childrenColumnName?: string;
 
   /**
    * Override default table elements
    * @type object
    */
-  components?: object
+  components?: object;
 
   /**
    * Expand all rows initially
    * @default false
    * @type boolean
    */
-  defaultExpandAllRows?: boolean
+  defaultExpandAllRows?: boolean;
 
   /**
    * Initial expanded row keys
    * @type string[]
    */
-  defaultExpandedRowKeys?: string[]
+  defaultExpandedRowKeys?: string[];
 
   /**
    * Current expanded row keys
    * @type string[]
    */
-  expandedRowKeys?: string[]
+  expandedRowKeys?: string[];
 
   /**
    * Expanded container render for each row
    * @type Function
    */
-  expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element
+  expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element;
 
   /**
    * Customize row expand Icon.
    * @type Function | VNodeChild
    */
-  expandIcon?: Function | VNodeChild | JSX.Element
+  expandIcon?: Function | VNodeChild | JSX.Element;
 
   /**
    * Whether to expand row by clicking anywhere in the whole row
    * @default false
    * @type boolean
    */
-  expandRowByClick?: boolean
+  expandRowByClick?: boolean;
 
   /**
    * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
    */
-  expandIconColumnIndex?: number
+  expandIconColumnIndex?: number;
 
   /**
    * Table footer renderer
    * @type Function | VNodeChild
    */
-  footer?: Function | VNodeChild | JSX.Element
+  footer?: Function | VNodeChild | JSX.Element;
 
   /**
    * Indent size in pixels of tree data
    * @default 15
    * @type number
    */
-  indentSize?: number
+  indentSize?: number;
 
   /**
    * i18n text including filter, sort, empty text, etc
    * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
    * @type object
    */
-  locale?: object
+  locale?: object;
 
   /**
    * Row's className
    * @type Function
    */
-  rowClassName?: (record: TableCustomRecord<T>) => string
+  rowClassName?: (record: TableCustomRecord<T>) => string;
 
   /**
    * Row selection config
    * @type object
    */
-  rowSelection?: TableRowSelection
+  rowSelection?: TableRowSelection;
 
   /**
    * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
@@ -299,39 +299,39 @@ export interface BasicTableProps<T = any> {
    * you need to add style .ant-table td { white-space: nowrap; }.
    * @type object
    */
-  scroll?: { x?: number | true; y?: number }
+  scroll?: { x?: number | true; y?: number };
 
   /**
    * Whether to show table header
    * @default true
    * @type boolean
    */
-  showHeader?: boolean
+  showHeader?: boolean;
 
   /**
    * Size of table
    * @default 'default'
    * @type string
    */
-  size?: SizeType
+  size?: SizeType;
 
   /**
    * Table title renderer
    * @type Function | ScopedSlot
    */
-  title?: VNodeChild | JSX.Element | string | ((data: Recordable) => string)
+  title?: VNodeChild | JSX.Element | string | ((data: Recordable) => string);
 
   /**
    * Set props on per header row
    * @type Function
    */
-  customHeaderRow?: (column: ColumnProps, index: number) => object
+  customHeaderRow?: (column: ColumnProps, index: number) => object;
 
   /**
    * Set props on per row
    * @type Function
    */
-  customRow?: (record: T, index: number) => object
+  customRow?: (record: T, index: number) => object;
 
   /**
    * `table-layout` attribute of table element
@@ -340,14 +340,14 @@ export interface BasicTableProps<T = any> {
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
    * @version 1.5.0
    */
-  tableLayout?: 'auto' | 'fixed' | string
+  tableLayout?: 'auto' | 'fixed' | string;
 
   /**
    * the render container of dropdowns in table
    * @param triggerNode
    * @version 1.5.0
    */
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement
+  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
 
   /**
    * Data can be changed again before rendering.
@@ -356,7 +356,7 @@ export interface BasicTableProps<T = any> {
    *
    * @version 1.5.4
    */
-  transformCellText?: Function
+  transformCellText?: Function;
 
   /**
    * Callback executed when pagination, filters or sorter is changed
@@ -365,7 +365,7 @@ export interface BasicTableProps<T = any> {
    * @param sorter
    * @param currentDataSource
    */
-  onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void
+  onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void;
 
   /**
    * Callback executed when the row expand icon is clicked
@@ -373,52 +373,52 @@ export interface BasicTableProps<T = any> {
    * @param expanded
    * @param record
    */
-  onExpand?: (expande: boolean, record: T) => void
+  onExpand?: (expande: boolean, record: T) => void;
 
   /**
    * Callback executed when the expanded rows change
    * @param expandedRows
    */
-  onExpandedRowsChange?: (expandedRows: string[] | number[]) => void
+  onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
 }
 
 export type CellFormat =
   | string
   | ((text: string, record: Recordable, index: number) => string | number)
-  | Map<string | number, any>
+  | Map<string | number, any>;
 
 // @ts-ignore
 export interface BasicColumn extends ColumnProps {
-  children?: BasicColumn[]
+  children?: BasicColumn[];
   filters?: {
-    text: string
-    value: string
+    text: string;
+    value: string;
     children?:
       | unknown[]
-      | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[]))
-  }[]
+      | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[]));
+  }[];
 
   //
-  flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'
-  customTitle?: VueNode
+  flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
+  customTitle?: VueNode;
 
-  slots?: Indexable
+  slots?: Recordable;
 
   // Whether to hide the column by default, it can be displayed in the column configuration
-  defaultHidden?: boolean
+  defaultHidden?: boolean;
 
   // Help text for table column header
-  helpMessage?: string | string[]
+  helpMessage?: string | string[];
 
-  format?: CellFormat
+  format?: CellFormat;
 
   // Editable
-  edit?: boolean
-  editRow?: boolean
-  editable?: boolean
-  editComponent?: ComponentType
-  editComponentProps?: Recordable
-  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>)
-  editValueMap?: (value: any) => string
-  onEditRow?: () => void
+  edit?: boolean;
+  editRow?: boolean;
+  editable?: boolean;
+  editComponent?: ComponentType;
+  editComponentProps?: Recordable;
+  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
+  editValueMap?: (value: any) => string;
+  onEditRow?: () => void;
 }

src/components/Table/src/types/tableAction.ts

@@ -1,19 +1,19 @@
-import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes'
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 export interface ActionItem extends ButtonProps {
-  onClick?: Fn
-  label: string
-  color?: 'success' | 'error' | 'warning'
-  icon?: string
-  popConfirm?: PopConfirm
-  disabled?: boolean
-  divider?: boolean
+  onClick?: Fn;
+  label: string;
+  color?: 'success' | 'error' | 'warning';
+  icon?: string;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
 }
 
 export interface PopConfirm {
-  title: string
-  okText?: string
-  cancelText?: string
-  confirm: Fn
-  cancel?: Fn
-  icon?: string
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: Fn;
+  cancel?: Fn;
+  icon?: string;
 }