diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 8f2f3ed..9c86a52 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -1,671 +1,644 @@
 <template>
-  <div ref="wrapRef" :class="getWrapperClass">
-    <div
-      :style="{
-        height: '100%',
-        background: '#fff',
-      }"
-    >
-      <a-table
-        ref="tableElRef"
-        v-bind="getBindValues"
-        :rowClassName="getRowClassName"
-        v-show="getEmptyDataIsShowTable"
-        :showSorterTooltip="false"
-        @change="handleTableChange"
-      >
-        <template #summary v-if="columns.filter((x) => x.total).length > 0">
-          <a-table-summary-row>
-            <a-table-summary-cell>合计</a-table-summary-cell>
-            <a-table-summary-cell v-if="getBindValues.rowSelection" />
-            <a-table-summary-cell
-              v-for="(column, idx) in columns.filter((x) => {
+    <div ref="wrapRef" :class="getWrapperClass">
+        <div :style="{height: '100%',background: '#fff'}">
+            <a-table
+                v-show="getEmptyDataIsShowTable"
+                ref="tableElRef"
+                :rowClassName="getRowClassName"
+                :showSorterTooltip="false"
+                v-bind="getBindValues"
+                @change="handleTableChange"
+            >
+                <template v-if="columns.filter((x) => x.total).length > 0" #summary>
+                    <a-table-summary-row>
+                        <a-table-summary-cell>合计</a-table-summary-cell>
+                        <a-table-summary-cell v-if="getBindValues.rowSelection" />
+                        <a-table-summary-cell
+                            v-for="(column, idx) in columns.filter((x) => {
                 return !getBindValues.showIndexColumn
                   ? x.flag !== 'ACTION'
                   : x.flag !== 'INDEX' && x.flag !== 'ACTION';
               })"
-              :key="idx"
-              :style="{ textAlign: column.align }"
-            >
-              <a-typography-text v-if="column.total" keyboard>
-                {{
-                  sum(getBindValues.dataSource.map((x) => Number(x[column.dataIndex as string])))
-                }}
-              </a-typography-text>
-            </a-table-summary-cell>
-            <a-table-summary-cell v-if="getBindValues.actionColumn" />
-          </a-table-summary-row>
-        </template>
-        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-          <slot :name="item" v-bind="data || {}"></slot>
-        </template>
+                            :key="idx"
+                            :style="{ textAlign: column.align }"
+                        >
+                            <a-typography-text v-if="column.total" keyboard>
+                                {{
+                                    sum(getBindValues.dataSource.map((x) => Number(x[column.dataIndex as string])))
+                                }}
+                            </a-typography-text>
+                        </a-table-summary-cell>
+                        <a-table-summary-cell v-if="getBindValues.actionColumn" />
+                    </a-table-summary-row>
+                </template>
+                <template v-for="item in Object.keys($slots)" :key="item" #[item]="data">
+                    <slot :name="item" v-bind="data || {}"></slot>
+                </template>
 
-        <template #bodyCell="data">
-          <template v-for="item in Object.keys($slots)">
-            <slot
-              v-if="data.column && data.column.dataIndex && data.column.dataIndex === item"
-              :name="item"
-              v-bind="data || {}"
-            ></slot>
-          </template>
-        </template>
+                <template #bodyCell="data">
+                    <template v-for="item in Object.keys($slots)">
+                        <slot
+                            v-if="data.column && data.column.dataIndex && data.column.dataIndex === item"
+                            :name="item"
+                            v-bind="data || {}"
+                        ></slot>
+                    </template>
+                </template>
 
-        <template #headerCell="{ column }">
-          <HeaderCell :column="column" />
-        </template>
-        <!-- <template #emptyText>
-          <div class="ant-empty-image">
-            <svg class="ant-empty-img-simple" width="64" height="20" viewBox="0 0 64 20">
-              <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
-                <ellipse
-                  class="ant-empty-img-simple-ellipse"
-                  fill="#F5F5F5"
-                  cx="32"
-                  cy="33"
-                  rx="32"
-                  ry="7"
-                />
-                <g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
-                  <path
-                    d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
-                  />
-                  <path
-                    d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
-                    fill="#FAFAFA"
-                    class="ant-empty-img-simple-path"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-          <p>{{ t('暂无数据') }}</p>
-        </template> -->
-        <!--      <template #[`header-${column.dataIndex}`] v-for="(column, index) in columns" :key="index">-->
-        <!--        <HeaderCell :column="column" />-->
-        <!--      </template>-->
-      </a-table>
+                <template #headerCell="{ column }">
+                    <HeaderCell :column="column" />
+                </template>
+            </a-table>
+        </div>
     </div>
-  </div>
 </template>
 <script lang="ts">
-  import type {
-    BasicTableProps,
-    TableActionType,
-    SizeType,
-    ColumnChangeParam,
-  } from './types/table';
+    import type {
+        BasicTableProps,
+        TableActionType,
+        SizeType,
+        ColumnChangeParam
+    } from "./types/table";
 
-  import {
-    defineComponent,
-    ref,
-    computed,
-    unref,
-    toRaw,
-    inject,
-    watchEffect,
-    onMounted,
-    nextTick,
-  } from 'vue';
-  import { useForm } from '/@/components/Form/index';
-  import { PageWrapperFixedHeightKey } from '/@/components/Page';
-  import HeaderCell from './components/HeaderCell.vue';
-  import { InnerHandlers } from './types/table';
-  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 { useTableScrollTo } from './hooks/useScrollTo';
-  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 { useDesign } from '/@/hooks/web/useDesign';
+    import {
+        defineComponent,
+        ref,
+        computed,
+        unref,
+        toRaw,
+        inject,
+        watchEffect,
+        onMounted,
+        nextTick
+    } from "vue";
+    import { useForm } from "/@/components/Form/index";
+    import { PageWrapperFixedHeightKey } from "/@/components/Page";
+    import HeaderCell from "./components/HeaderCell.vue";
+    import { InnerHandlers } from "./types/table";
+    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 { useTableScrollTo } from "./hooks/useScrollTo";
+    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 { useDesign } from "/@/hooks/web/useDesign";
 
-  import { omit, sum } from 'lodash-es';
-  import { basicProps } from './props';
-  import { isFunction } from '/@/utils/is';
-  import { warn } from '/@/utils/log';
-  import { useI18n } from '/@/hooks/web/useI18n';
+    import { omit, sum } from "lodash-es";
+    import { basicProps } from "./props";
+    import { isFunction } from "/@/utils/is";
+    import { warn } from "/@/utils/log";
+    import { useI18n } from "/@/hooks/web/useI18n";
 
-  export default defineComponent({
-    components: {
-      HeaderCell,
-    },
-    props: basicProps,
-    emits: [
-      'fetch-success',
-      'fetch-error',
-      'selection-change',
-      'register',
-      'row-click',
-      'row-dbClick',
-      'row-contextmenu',
-      'row-mouseenter',
-      'row-mouseleave',
-      'edit-end',
-      'edit-cancel',
-      'edit-row-end',
-      'edit-change',
-      'expanded-rows-change',
-      'change',
-      'columns-change',
-    ],
-    setup(props, { attrs, emit, slots, expose }) {
-      const { t } = useI18n();
-      const tableElRef = ref<any>(null);
-      const tableData = ref<Recordable[]>([]);
-      const wrapRef = ref(null);
-      const formRef = ref();
-      const innerPropsRef = ref<Partial<BasicTableProps>>();
-      const { prefixCls } = useDesign('basic-table');
-      const [registerForm, formActions] = useForm();
-
-      const getProps = computed(() => {
-        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
-      });
-
-      const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
-      watchEffect(() => {
-        unref(isFixedHeightPage) &&
-          props.canResize &&
-          warn(
-            "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)",
-          );
-      });
-
-      const { getLoading, setLoading } = useLoading(getProps);
-      const {
-        getPaginationInfo,
-        getPagination,
-        setPagination,
-        setShowPagination,
-        getShowPagination,
-      } = usePagination(getProps);
-
-      const {
-        getRowSelection,
-        getRowSelectionRef,
-        getSelectRows,
-        clearSelectedRowKeys,
-        getSelectRowKeys,
-        deleteSelectRowByKey,
-        setSelectedRowKeys,
-      } = useRowSelection(getProps, tableData, emit);
-
-      const {
-        handleTableChange: onTableChange,
-        getDataSourceRef,
-        getDataSource,
-        getRawDataSource,
-        setTableData,
-        updateTableDataRecord,
-        deleteTableDataRecord,
-        insertTableDataRecord,
-        findTableDataRecord,
-        fetch,
-        getRowKey,
-        reload,
-        getAutoCreateKey,
-        updateTableData,
-      } = useDataSource(
-        getProps,
-        {
-          tableData,
-          getPaginationInfo,
-          setLoading,
-          setPagination,
-          getFieldsValue: formActions.getFieldsValue,
-          clearSelectedRowKeys,
+    export default defineComponent({
+        components: {
+            HeaderCell
         },
-        emit,
-      );
+        props: basicProps,
+        emits: [
+            "fetch-success",
+            "fetch-error",
+            "selection-change",
+            "register",
+            "row-click",
+            "row-dbClick",
+            "row-contextmenu",
+            "row-mouseenter",
+            "row-mouseleave",
+            "edit-end",
+            "edit-cancel",
+            "edit-row-end",
+            "edit-change",
+            "expanded-rows-change",
+            "change",
+            "columns-change"
+        ],
+        setup(props, { attrs, emit, slots, expose }) {
+            const { t } = useI18n();
+            const tableElRef = ref<any>(null);
+            const tableData = ref<Recordable[]>([]);
+            const wrapRef = ref(null);
+            const formRef = ref();
+            const innerPropsRef = ref<Partial<BasicTableProps>>();
+            const { prefixCls } = useDesign("basic-table");
+            const [registerForm, formActions] = useForm();
 
-      function handleTableChange(...args) {
-        const { onChange, isPaginateByDataSource, isFilterByDataSoure } = unref(getProps);
-        if (args[3].action === 'filter' && isFilterByDataSoure) return;
+            const getProps = computed(() => {
+                return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+            });
 
-        onTableChange.call(undefined, isPaginateByDataSource, ...args);
-        emit('change', ...args);
+            const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);
+            watchEffect(() => {
+                unref(isFixedHeightPage) &&
+                props.canResize &&
+                warn(
+                    "'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)"
+                );
+            });
 
-        // 解决通过useTable注册onChange时不起作用的问题
-        onChange && isFunction(onChange) && onChange.call(undefined, ...args);
-      }
+            const { getLoading, setLoading } = useLoading(getProps);
+            const {
+                getPaginationInfo,
+                getPagination,
+                setPagination,
+                setShowPagination,
+                getShowPagination
+            } = usePagination(getProps);
 
-      const {
-        getViewColumns,
-        getColumns,
-        setCacheColumnsByField,
-        setColumns,
-        getColumnsRef,
-        getCacheColumns,
-      } = useColumns(getProps, getPaginationInfo);
+            const {
+                getRowSelection,
+                getRowSelectionRef,
+                getSelectRows,
+                clearSelectedRowKeys,
+                getSelectRowKeys,
+                deleteSelectRowByKey,
+                setSelectedRowKeys
+            } = useRowSelection(getProps, tableData, emit);
 
-      const { getScrollRef, redoHeight, tabelWidth } = useTableScroll(
-        getProps,
-        tableElRef,
-        getColumnsRef,
-        getRowSelectionRef,
-        getDataSourceRef,
-        wrapRef,
-        formRef,
-      );
+            const {
+                handleTableChange: onTableChange,
+                getDataSourceRef,
+                getDataSource,
+                getRawDataSource,
+                setTableData,
+                updateTableDataRecord,
+                deleteTableDataRecord,
+                insertTableDataRecord,
+                findTableDataRecord,
+                fetch,
+                getRowKey,
+                reload,
+                getAutoCreateKey,
+                updateTableData,
+                setSearchFormData
+            } = useDataSource(
+                getProps,
+                {
+                    tableData,
+                    getPaginationInfo,
+                    setLoading,
+                    setPagination,
+                    getFieldsValue: formActions.getFieldsValue,
+                    clearSelectedRowKeys
+                },
+                emit
+            );
 
-      const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef);
+            function handleTableChange(...args) {
+                const { onChange, isPaginateByDataSource, isFilterByDataSoure } = unref(getProps);
+                if (args[3].action === "filter" && isFilterByDataSoure) return;
 
-      const { customRow } = useCustomRow(getProps, {
-        setSelectedRowKeys,
-        getSelectRowKeys,
-        clearSelectedRowKeys,
-        getAutoCreateKey,
-        emit,
-      });
+                onTableChange.call(undefined, isPaginateByDataSource, ...args);
+                emit("change", ...args);
 
-      const { getRowClassName } = useTableStyle(getProps, prefixCls);
+                // 解决通过useTable注册onChange时不起作用的问题
+                onChange && isFunction(onChange) && onChange.call(undefined, ...args);
+            }
 
-      const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
-        getProps,
-        tableData,
-        emit,
-      );
-      const calcToolBarWidth = ref(0);
+            const {
+                getViewColumns,
+                getColumns,
+                setCacheColumnsByField,
+                setColumns,
+                getColumnsRef,
+                getCacheColumns
+            } = useColumns(getProps, getPaginationInfo);
 
-      const handlers: InnerHandlers = {
-        onColumnsChange: (data: ColumnChangeParam[]) => {
-          emit('columns-change', data);
-          // support useTable
-          unref(getProps).onColumnsChange?.(data);
-        },
-      };
+            const { getScrollRef, redoHeight, tabelWidth } = useTableScroll(
+                getProps,
+                tableElRef,
+                getColumnsRef,
+                getRowSelectionRef,
+                getDataSourceRef,
+                wrapRef,
+                formRef
+            );
 
-      const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
-        useTableForm(getProps, slots, fetch, getLoading);
+            const { scrollTo } = useTableScrollTo(tableElRef, getDataSourceRef);
 
-      const getBindValues = computed(() => {
-        const dataSource = unref(getDataSourceRef);
-        let propsData: Recordable = {
-          ...attrs,
-          customRow,
-          ...unref(getProps),
-          ...unref(getHeaderProps),
-          scroll: unref(getScrollRef),
-          loading: unref(getLoading),
-          tableLayout: 'fixed',
-          rowSelection: unref(getRowSelectionRef),
-          rowKey: unref(getRowKey),
-          columns: toRaw(unref(getViewColumns)),
-          pagination: toRaw(unref(getPaginationInfo)),
-          dataSource,
-          footer: unref(getFooterProps),
-          ...unref(getExpandOption),
-        };
-        if (slots.expandedRowRender) {
-          propsData = omit(propsData, 'scroll');
+            const { customRow } = useCustomRow(getProps, {
+                setSelectedRowKeys,
+                getSelectRowKeys,
+                clearSelectedRowKeys,
+                getAutoCreateKey,
+                emit
+            });
+
+            const { getRowClassName } = useTableStyle(getProps, prefixCls);
+
+            const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
+                getProps,
+                tableData,
+                emit
+            );
+            const calcToolBarWidth = ref(0);
+
+            const handlers: InnerHandlers = {
+                onColumnsChange: (data: ColumnChangeParam[]) => {
+                    emit("columns-change", data);
+                    // support useTable
+                    unref(getProps).onColumnsChange?.(data);
+                }
+            };
+
+            const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } =
+                useTableForm(getProps, slots, fetch, getLoading);
+
+            const getBindValues = computed(() => {
+                const dataSource = unref(getDataSourceRef);
+                let propsData: Recordable = {
+                    ...attrs,
+                    customRow,
+                    ...unref(getProps),
+                    ...unref(getHeaderProps),
+                    scroll: unref(getScrollRef),
+                    loading: unref(getLoading),
+                    tableLayout: "fixed",
+                    rowSelection: unref(getRowSelectionRef),
+                    rowKey: unref(getRowKey),
+                    columns: toRaw(unref(getViewColumns)),
+                    pagination: toRaw(unref(getPaginationInfo)),
+                    dataSource,
+                    footer: unref(getFooterProps),
+                    ...unref(getExpandOption)
+                };
+                if (slots.expandedRowRender) {
+                    propsData = omit(propsData, "scroll");
+                }
+
+                propsData = omit(propsData, ["class", "onChange"]);
+                return propsData;
+            });
+
+            const { getFooterProps } = useTableFooter(
+                getProps,
+                getScrollRef,
+                tableElRef,
+                getDataSourceRef
+            );
+
+            const getWrapperClass = computed(() => {
+                const values = unref(getBindValues);
+                let page = getShowPagination() ? prefixCls + "-form-has-pagenation" : "";
+
+                return [
+                    prefixCls,
+                    attrs.class,
+                    {
+                        [`${prefixCls}-form-container`]: values.useSearchForm,
+                        [`${prefixCls}--inset`]: values.inset
+                    },
+                    page
+                ];
+            });
+
+            const getEmptyDataIsShowTable = computed(() => {
+                const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
+                if (emptyDataIsShowTable || !useSearchForm) {
+                    return true;
+                }
+                return !!unref(getDataSourceRef).length;
+            });
+
+            function setProps(props: Partial<BasicTableProps>) {
+                innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+            }
+
+            const setToolBarWidth = () => {
+                if (!tableElRef.value) return;
+                calcToolBarWidth.value = tableElRef.value?.$el.querySelector(
+                    ".vben-basic-table-header__toolbar"
+                ).clientWidth;
+            };
+
+            onMounted(() => {
+                nextTick(() => {
+                    setToolBarWidth();
+                });
+            });
+
+            const tableAction: TableActionType = {
+                reload,
+                getSelectRows,
+                clearSelectedRowKeys,
+                getSelectRowKeys,
+                deleteSelectRowByKey,
+                setPagination,
+                setTableData,
+                updateTableDataRecord,
+                deleteTableDataRecord,
+                insertTableDataRecord,
+                findTableDataRecord,
+                redoHeight,
+                setSelectedRowKeys,
+                setColumns,
+                setLoading,
+                getDataSource,
+                getRawDataSource,
+                setProps,
+                getRowSelection,
+                getPaginationRef: getPagination,
+                getColumns,
+                getCacheColumns,
+                emit,
+                updateTableData,
+                setShowPagination,
+                getShowPagination,
+                setCacheColumnsByField,
+                expandAll,
+                expandRows,
+                collapseAll,
+                scrollTo,
+                getSize: () => {
+                    return unref(getBindValues).size as SizeType;
+                },
+                setToolBarWidth
+            };
+
+            function beforeSearchInfoChange(info){
+                setSearchFormData(info);
+                handleSearchInfoChange(info);
+            }
+
+            const { getHeaderProps } = useTableHeader(
+                getProps,
+                slots,
+                handlers,
+                tabelWidth,
+                calcToolBarWidth,
+                getFormProps,
+                getBindValues,
+                tableAction,
+                beforeSearchInfoChange,
+                redoHeight,
+                getFormSlotKeys,
+                replaceFormSlotKey
+            );
+            createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+            expose(tableAction);
+
+            emit("register", tableAction, formActions);
+
+            return {
+                formRef,
+                tableElRef,
+                getBindValues,
+                getLoading,
+                registerForm,
+                getEmptyDataIsShowTable,
+                handleTableChange,
+                getRowClassName,
+                wrapRef,
+                tableAction,
+                getFormProps: getFormProps as any,
+                getWrapperClass,
+                columns: getViewColumns,
+                sum,
+                t,
+                tabelWidth,
+                calcToolBarWidth
+            };
         }
-
-        propsData = omit(propsData, ['class', 'onChange']);
-        return propsData;
-      });
-
-      const { getFooterProps } = useTableFooter(
-        getProps,
-        getScrollRef,
-        tableElRef,
-        getDataSourceRef,
-      );
-
-      const getWrapperClass = computed(() => {
-        const values = unref(getBindValues);
-        let page = getShowPagination() ? prefixCls + '-form-has-pagenation' : '';
-
-        return [
-          prefixCls,
-          attrs.class,
-          {
-            [`${prefixCls}-form-container`]: values.useSearchForm,
-            [`${prefixCls}--inset`]: values.inset,
-          },
-          page,
-        ];
-      });
-
-      const getEmptyDataIsShowTable = computed(() => {
-        const { emptyDataIsShowTable, useSearchForm } = unref(getProps);
-        if (emptyDataIsShowTable || !useSearchForm) {
-          return true;
-        }
-        return !!unref(getDataSourceRef).length;
-      });
-
-      function setProps(props: Partial<BasicTableProps>) {
-        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
-      }
-      const setToolBarWidth = () => {
-        if (!tableElRef.value) return;
-        calcToolBarWidth.value = tableElRef.value?.$el.querySelector(
-          '.vben-basic-table-header__toolbar',
-        ).clientWidth;
-      };
-
-      onMounted(() => {
-        nextTick(() => {
-          setToolBarWidth();
-        });
-      });
-
-      const tableAction: TableActionType = {
-        reload,
-        getSelectRows,
-        clearSelectedRowKeys,
-        getSelectRowKeys,
-        deleteSelectRowByKey,
-        setPagination,
-        setTableData,
-        updateTableDataRecord,
-        deleteTableDataRecord,
-        insertTableDataRecord,
-        findTableDataRecord,
-        redoHeight,
-        setSelectedRowKeys,
-        setColumns,
-        setLoading,
-        getDataSource,
-        getRawDataSource,
-        setProps,
-        getRowSelection,
-        getPaginationRef: getPagination,
-        getColumns,
-        getCacheColumns,
-        emit,
-        updateTableData,
-        setShowPagination,
-        getShowPagination,
-        setCacheColumnsByField,
-        expandAll,
-        expandRows,
-        collapseAll,
-        scrollTo,
-        getSize: () => {
-          return unref(getBindValues).size as SizeType;
-        },
-        setToolBarWidth,
-      };
-
-      const { getHeaderProps } = useTableHeader(
-        getProps,
-        slots,
-        handlers,
-        tabelWidth,
-        calcToolBarWidth,
-        getFormProps,
-        getBindValues,
-        tableAction,
-        handleSearchInfoChange,
-        redoHeight,
-        getFormSlotKeys,
-        replaceFormSlotKey,
-      );
-      createTableContext({ ...tableAction, wrapRef, getBindValues });
-
-      expose(tableAction);
-
-      emit('register', tableAction, formActions);
-
-      return {
-        formRef,
-        tableElRef,
-        getBindValues,
-        getLoading,
-        registerForm,
-        getEmptyDataIsShowTable,
-        handleTableChange,
-        getRowClassName,
-        wrapRef,
-        tableAction,
-        getFormProps: getFormProps as any,
-        getWrapperClass,
-        columns: getViewColumns,
-        sum,
-        t,
-        tabelWidth,
-        calcToolBarWidth,
-      };
-    },
-  });
+    });
 </script>
 <style lang="less">
-  @border-color: #cecece4d;
+    @border-color: #cecece4d;
 
-  @prefix-cls: ~'@{namespace}-basic-table';
+    @prefix-cls: ~'@{namespace}-basic-table';
 
-  [data-theme='dark'] {
-    .ant-table-tbody > tr:hover.ant-table-row-selected > td,
-    .ant-table-tbody > tr.ant-table-row-selected td {
-      background-color: #262626;
-    }
-  }
-
-  .@{prefix-cls} {
-    max-width: 100%;
-    height: 100%;
-
-    &-row__striped {
-      td {
-        background-color: @app-content-background;
-      }
+    [data-theme='dark'] {
+        .ant-table-tbody > tr:hover.ant-table-row-selected > td,
+        .ant-table-tbody > tr.ant-table-row-selected td {
+            background-color: #262626;
+        }
     }
 
-    &-form-container {
-      padding: 0;
-      margin-right: 8px;
-      position: relative;
+    .@{prefix-cls} {
+        max-width: 100%;
+        height: 100%;
 
-      .ant-form {
-        margin-bottom: 0;
-        background-color: @component-background;
-        border-radius: 2px;
-
-        &.search-form {
-          position: absolute;
-          padding-top: 0;
-          z-index: 99;
-
-          .ant-row {
-            display: flex !important;
-            flex: auto;
-            justify-content: flex-end;
-            align-items: center;
-            line-height: 60px;
-            margin-bottom: 0 !important;
-          }
+        &-row__striped {
+            td {
+                background-color: @app-content-background;
+            }
         }
 
-        .basicCol {
-          position: initial;
+        &-form-container {
+            padding: 0;
+            margin-right: 8px;
+            position: relative;
+
+            .ant-form {
+                margin-bottom: 0;
+                background-color: @component-background;
+                border-radius: 2px;
+
+                &.search-form {
+                    position: absolute;
+                    padding-top: 0;
+                    z-index: 99;
+
+                    .ant-row {
+                        display: flex !important;
+                        flex: auto;
+                        justify-content: flex-end;
+                        align-items: center;
+                        line-height: 60px;
+                        margin-bottom: 0 !important;
+                    }
+                }
+
+                .basicCol {
+                    position: initial;
+                }
+
+                .ant-form-item-label {
+                    label {
+                        max-width: 100px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: block;
+                        line-height: 32px;
+                        margin-right: 4px;
+                    }
+                }
+            }
         }
 
-        .ant-form-item-label {
-          label {
-            max-width: 100px;
+        &-title {
+            display: inline-block !important;
+            width: 200px;
             overflow: hidden;
             text-overflow: ellipsis;
-            display: block;
-            line-height: 32px;
-            margin-right: 4px;
-          }
+            white-space: nowrap;
+            line-height: 60px !important;
+            padding-left: 16px !important;
         }
-      }
-    }
 
-    &-title {
-      display: inline-block !important;
-      width: 200px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: 60px !important;
-      padding-left: 16px !important;
-    }
+        .ant-tag {
+            margin-right: 0;
+        }
 
-    .ant-tag {
-      margin-right: 0;
-    }
+        .ant-table-wrapper {
+            padding-bottom: 6px;
+            background-color: @component-background;
+            border-radius: 2px;
+            height: 100%;
 
-    .ant-table-wrapper {
-      padding-bottom: 6px;
-      background-color: @component-background;
-      border-radius: 2px;
-      height: 100%;
-
-      .ant-spin-container {
-        height: 100%;
-      }
-
-      .ant-table-title {
-        min-height: 40px;
-        padding: 0 !important;
-      }
-
-      .ant-table.ant-table-bordered .ant-table-title {
-        border: none !important;
-      }
-    }
-
-    .wrap {
-      .ant-table-wrapper {
-        padding: 0;
-      }
-    }
-
-    .ant-table {
-      width: 100%;
-      overflow-x: hidden;
-      height: 100%;
-
-      // &.ant-table-layout-fixed {
-      //   .ant-table-body {
-      //     border-right: 1px solid #f0f0f0;
-      //   }
-      // }
-
-      &-title {
-        display: flex;
-        padding: 8px 6px;
-        border-bottom: none;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      &-container {
-        height: calc(100% - 100px);
-      }
-
-      &-header {
-        border-top: 1px solid #f0f0f0;
-      }
-
-      .ant-table-thead {
-        th {
-          background: #f6f8fa;
-          font-weight: bold;
-
-          &::before {
-            display: none;
-          }
-
-          .ant-table-column-sorters {
-            justify-content: flex-start;
-            display: inline-flex;
-
-            .ant-table-column-title {
-              flex: initial;
+            .ant-spin-container {
+                height: 100%;
             }
-          }
-        }
-      }
 
-      .ant-table-body {
-        height: calc(100% - 48px) !important;
-        max-height: none !important;
+            .ant-table-title {
+                min-height: 40px;
+                padding: 0 !important;
+            }
 
-        .ant-table-summary {
-          z-index: 0;
+            .ant-table.ant-table-bordered .ant-table-title {
+                border: none !important;
+            }
         }
 
-        // table {
-        //   height: 100%;
-        // }
-      }
-      //.ant-table-tbody > tr.ant-table-row-selected td {
-      //background-color: fade(@primary-color, 8%) !important;
-      //}
-      .ant-table-tbody {
-        tr {
-          td {
-            padding: 0 8px;
-            height: 40px;
-          }
+        .wrap {
+            .ant-table-wrapper {
+                padding: 0;
+            }
+        }
+
+        .ant-table {
+            width: 100%;
+            overflow-x: hidden;
+            height: 100%;
+
+            // &.ant-table-layout-fixed {
+            //   .ant-table-body {
+            //     border-right: 1px solid #f0f0f0;
+            //   }
+            // }
+
+            &-title {
+                display: flex;
+                padding: 8px 6px;
+                border-bottom: none;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            &-container {
+                height: calc(100% - 100px);
+            }
+
+            &-header {
+                border-top: 1px solid #f0f0f0;
+            }
+
+            .ant-table-thead {
+                th {
+                    background: #f6f8fa;
+                    font-weight: bold;
+
+                    &::before {
+                        display: none;
+                    }
+
+                    .ant-table-column-sorters {
+                        justify-content: flex-start;
+                        display: inline-flex;
+
+                        .ant-table-column-title {
+                            flex: initial;
+                        }
+                    }
+                }
+            }
+
+            .ant-table-body {
+                height: calc(100% - 48px) !important;
+                max-height: none !important;
+
+                .ant-table-summary {
+                    z-index: 0;
+                }
+
+                // table {
+                //   height: 100%;
+                // }
+            }
+
+            //.ant-table-tbody > tr.ant-table-row-selected td {
+            //background-color: fade(@primary-color, 8%) !important;
+            //}
+            .ant-table-tbody {
+                tr {
+                    td {
+                        padding: 0 8px;
+                        height: 40px;
+                    }
+
+                    &:hover {
+                        td {
+                            background-color: #eef4ff;
+                        }
+                    }
+
+                    &.ant-table-placeholder {
+                        .ant-table-expanded-row-fixed::after {
+                            display: none;
+                        }
+
+                        &:hover {
+                            td {
+                                background-color: transparent;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &-form-has-pagenation {
+            .ant-table {
+                height: calc(100% - 38px);
+            }
+        }
+
+        .ant-pagination {
+            margin: 10px 6px 0 0;
+        }
+
+        .ant-table-footer {
+            padding: 0;
+
+            .ant-table-wrapper {
+                padding: 0;
+            }
+
+            table {
+                border: none !important;
+            }
+
+            .ant-table-body {
+                overflow-x: hidden !important;
+                //  overflow-y: scroll !important;
+            }
 
-          &:hover {
             td {
-              background-color: #eef4ff;
+                padding: 12px 8px;
+            }
+        }
+
+        &--inset {
+            .ant-table-wrapper {
+                padding: 0;
             }
-          }
-
-          &.ant-table-placeholder {
-            .ant-table-expanded-row-fixed::after {
-              display: none;
-            }
-
-            &:hover {
-              td {
-                background-color: transparent;
-              }
-            }
-          }
         }
-      }
     }
-
-    &-form-has-pagenation {
-      .ant-table {
-        height: calc(100% - 38px);
-      }
-    }
-
-    .ant-pagination {
-      margin: 10px 6px 0 0;
-    }
-
-    .ant-table-footer {
-      padding: 0;
-
-      .ant-table-wrapper {
-        padding: 0;
-      }
-
-      table {
-        border: none !important;
-      }
-
-      .ant-table-body {
-        overflow-x: hidden !important;
-        //  overflow-y: scroll !important;
-      }
-
-      td {
-        padding: 12px 8px;
-      }
-    }
-
-    &--inset {
-      .ant-table-wrapper {
-        padding: 0;
-      }
-    }
-  }
 </style>
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 54d0776..ec2b23a 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -1,377 +1,383 @@
-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,
-  unref,
-  ComputedRef,
-  computed,
-  onMounted,
-  watch,
-  reactive,
-  Ref,
-  watchEffect,
-} from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-import { buildUUID } from '/@/utils/uuid';
-import { isFunction, isBoolean } from '/@/utils/is';
-import { get, cloneDeep, merge } from 'lodash-es';
-import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
+    ref,
+    unref,
+    ComputedRef,
+    computed,
+    onMounted,
+    watch,
+    reactive,
+    Ref,
+    watchEffect
+} from "vue";
+import { useTimeoutFn } from "/@/hooks/core/useTimeout";
+import { buildUUID } from "/@/utils/uuid";
+import { isFunction, isBoolean } from "/@/utils/is";
+import { get, cloneDeep, merge } from "lodash-es";
+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>,
-  {
-    getPaginationInfo,
-    setPagination,
-    setLoading,
-    getFieldsValue,
-    clearSelectedRowKeys,
-    tableData,
-  }: ActionType,
-  emit: EmitType,
-) {
-  const searchState = reactive<SearchState>({
-    sortInfo: {},
-    filterInfo: {},
-  });
-  const dataSourceRef = ref<Recordable[]>([]);
-  const rawDataSourceRef = ref<Recordable>({});
-
-  watchEffect(() => {
-    tableData.value = unref(dataSourceRef);
-  });
-
-  watch(
-    () => unref(propsRef).dataSource,
-    () => {
-      const { dataSource, api } = unref(propsRef);
-      !api && dataSource && (dataSourceRef.value = dataSource);
-    },
+    propsRef: ComputedRef<BasicTableProps>,
     {
-      immediate: true,
-    },
-  );
-
-  function handleTableChange(
-    isPaginateByDataSource = false,
-    pagination: PaginationProps,
-    filters: Partial<Recordable<string[]>>,
-    sorter: SorterResult,
-  ) {
-    const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef);
-    if (clearSelectOnPageChange) {
-      clearSelectedRowKeys();
-    }
-    setPagination(pagination);
-
-    const params: Recordable = {};
-    if (sorter && isFunction(sortFn)) {
-      const sortInfo = sortFn(sorter);
-      searchState.sortInfo = sortInfo;
-      params.sortInfo = sortInfo;
-    }
-
-    if (filters && isFunction(filterFn)) {
-      const filterInfo = filterFn(filters);
-      searchState.filterInfo = filterInfo;
-      params.filterInfo = filterInfo;
-    }
-    if (!isPaginateByDataSource) {
-      fetch(params);
-    }
-  }
-
-  function setTableKey(items: any[]) {
-    if (!items || !Array.isArray(items)) return;
-    items.forEach((item) => {
-      if (!item[ROW_KEY]) {
-        item[ROW_KEY] = buildUUID();
-      }
-      if (item.children && item.children.length) {
-        setTableKey(item.children);
-      }
+        getPaginationInfo,
+        setPagination,
+        setLoading,
+        getFieldsValue,
+        clearSelectedRowKeys,
+        tableData
+    }: ActionType,
+    emit: EmitType
+) {
+    const searchState = reactive<SearchState>({
+        sortInfo: {},
+        filterInfo: {}
     });
-  }
+    const dataSourceRef = ref<Recordable[]>([]);
+    const rawDataSourceRef = ref<Recordable>({});
+    const searchFormData = ref({});
 
-  const getAutoCreateKey = computed(() => {
-    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
-  });
+    watchEffect(() => {
+        tableData.value = unref(dataSourceRef);
+    });
 
-  const getRowKey = computed(() => {
-    const { rowKey } = unref(propsRef);
-    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
-  });
+    watch(
+        () => unref(propsRef).dataSource,
+        () => {
+            const { dataSource, api } = unref(propsRef);
+            !api && dataSource && (dataSourceRef.value = dataSource);
+        },
+        {
+            immediate: true
+        }
+    );
 
-  const getDataSourceRef = computed(() => {
-    const dataSource = unref(dataSourceRef);
-    if (!dataSource || dataSource.length === 0) {
-      return unref(dataSourceRef);
+    function handleTableChange(
+        isPaginateByDataSource = false,
+        pagination: PaginationProps,
+        filters: Partial<Recordable<string[]>>,
+        sorter: SorterResult
+    ) {
+        const { clearSelectOnPageChange, sortFn, filterFn } = unref(propsRef);
+        if (clearSelectOnPageChange) {
+            clearSelectedRowKeys();
+        }
+        setPagination(pagination);
+
+        const params: Recordable = {};
+        if (sorter && isFunction(sortFn)) {
+            const sortInfo = sortFn(sorter);
+            searchState.sortInfo = sortInfo;
+            params.sortInfo = sortInfo;
+        }
+
+        if (filters && isFunction(filterFn)) {
+            const filterInfo = filterFn(filters);
+            searchState.filterInfo = filterInfo;
+            params.filterInfo = filterInfo;
+        }
+        if (!isPaginateByDataSource) {
+            fetch(params);
+        }
     }
-    if (unref(getAutoCreateKey)) {
-      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) => {
+    function setTableKey(items: any[]) {
+        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);
             }
-          });
-          dataSourceRef.value = data;
-        }
-      }
-    }
-    return unref(dataSourceRef);
-  });
-
-  async function updateTableData(index: number, key: string, value: any) {
-    const record = dataSourceRef.value[index];
-    if (record) {
-      dataSourceRef.value[index][key] = value;
-    }
-    return dataSourceRef.value[index];
-  }
-
-  function updateTableDataRecord(
-    rowKey: string | number,
-    record: Recordable,
-  ): Recordable | undefined {
-    const row = findTableDataRecord(rowKey);
-
-    if (row) {
-      for (const field in row) {
-        if (Reflect.has(record, field)) row[field] = record[field];
-      }
-      return row;
-    }
-  }
-
-  function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
-    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
-    const rowKeyName = unref(getRowKey);
-    if (!rowKeyName) return;
-    const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
-    for (const key of rowKeys) {
-      let index: number | undefined = dataSourceRef.value.findIndex((row) => {
-        let targetKeyName: string;
-        if (typeof rowKeyName === 'function') {
-          targetKeyName = rowKeyName(row);
-        } else {
-          targetKeyName = rowKeyName as string;
-        }
-        return row[targetKeyName] === key;
-      });
-      if (index >= 0) {
-        dataSourceRef.value.splice(index, 1);
-      }
-      index = unref(propsRef).dataSource?.findIndex((row) => {
-        let targetKeyName: string;
-        if (typeof rowKeyName === 'function') {
-          targetKeyName = rowKeyName(row);
-        } else {
-          targetKeyName = rowKeyName as string;
-        }
-        return row[targetKeyName] === key;
-      });
-      if (typeof index !== 'undefined' && index !== -1)
-        unref(propsRef).dataSource?.splice(index, 1);
-    }
-    setPagination({
-      total: unref(propsRef).dataSource?.length,
-    });
-  }
-
-  function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
-    // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
-    index = index ?? dataSourceRef.value?.length;
-    unref(dataSourceRef).splice(index, 0, record);
-    return unref(dataSourceRef);
-  }
-
-  function findTableDataRecord(rowKey: string | number) {
-    if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
-
-    const rowKeyName = unref(getRowKey);
-    if (!rowKeyName) return;
-
-    const { childrenColumnName = 'children' } = unref(propsRef);
-
-    const findRow = (array: any[]) => {
-      let ret;
-      array.some(function iter(r) {
-        if (typeof rowKeyName === 'function') {
-          if ((rowKeyName(r) as string) === rowKey) {
-            ret = r;
-            return true;
-          }
-        } else {
-          if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
-            ret = r;
-            return true;
-          }
-        }
-        return r[childrenColumnName] && r[childrenColumnName].some(iter);
-      });
-      return ret;
-    };
-
-    // const row = dataSourceRef.value.find(r => {
-    //   if (typeof rowKeyName === 'function') {
-    //     return (rowKeyName(r) as string) === rowKey
-    //   } else {
-    //     return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey
-    //   }
-    // })
-    return findRow(dataSourceRef.value);
-  }
-
-  async function fetch(opt?: FetchParams) {
-    const {
-      api,
-      searchInfo,
-      defSort,
-      fetchSetting,
-      beforeFetch,
-      afterFetch,
-      useSearchForm,
-      pagination,
-    } = unref(propsRef);
-    if (!api || !isFunction(api)) return;
-    try {
-      setLoading(true);
-      const { pageField, sizeField, listField, totalField } = Object.assign(
-        {},
-        FETCH_SETTING,
-        fetchSetting,
-      );
-      let pageParams: Recordable = {};
-
-      const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo) as PaginationProps;
-
-      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
-        pageParams = {};
-      } else {
-        pageParams[pageField] = (opt && opt.page) || current;
-        pageParams[sizeField] = pageSize;
-      }
-
-      const { sortInfo = {}, filterInfo } = searchState;
-
-      let params: Recordable = merge(
-        pageParams,
-        useSearchForm ? getFieldsValue() : {},
-        searchInfo,
-        opt?.searchInfo ?? {},
-        defSort,
-        sortInfo,
-        filterInfo,
-        opt?.sortInfo ?? {},
-        opt?.filterInfo ?? {},
-      );
-      if (beforeFetch && isFunction(beforeFetch)) {
-        params = (await beforeFetch(params)) || params;
-      }
-
-      const res = await api(params);
-      rawDataSourceRef.value = res;
-
-      const isArrayResult = Array.isArray(res);
-
-      let resultItems: Recordable[] = isArrayResult ? res : get(res, listField);
-      const resultTotal: number = isArrayResult ? res.length : get(res, totalField);
-
-      // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
-      if (resultTotal) {
-        const currentTotalPage = Math.ceil(resultTotal / pageSize);
-        if (current > currentTotalPage) {
-          setPagination({
-            current: currentTotalPage,
-          });
-          return await fetch(opt);
-        }
-      }
-
-      if (afterFetch && isFunction(afterFetch)) {
-        resultItems = (await afterFetch(resultItems)) || resultItems;
-      }
-      dataSourceRef.value = resultItems;
-      setPagination({
-        total: resultTotal || 0,
-      });
-      if (opt && opt.page) {
-        setPagination({
-          current: opt.page || 1,
         });
-      }
-      emit('fetch-success', {
-        items: unref(resultItems),
-        total: resultTotal,
-      });
-      return resultItems;
-    } catch (error) {
-      emit('fetch-error', error);
-      dataSourceRef.value = [];
-      setPagination({
-        total: 0,
-      });
-    } finally {
-      setLoading(false);
     }
-  }
 
-  function setTableData<T = Recordable>(values: T[]) {
-    dataSourceRef.value = values;
-  }
+    const getAutoCreateKey = computed(() => {
+        return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+    });
 
-  function getDataSource<T = Recordable>() {
-    return getDataSourceRef.value as T[];
-  }
+    const getRowKey = computed(() => {
+        const { rowKey } = unref(propsRef);
+        return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+    });
 
-  function getRawDataSource<T = Recordable>() {
-    return rawDataSourceRef.value as T;
-  }
+    const getDataSourceRef = computed(() => {
+        const dataSource = unref(dataSourceRef);
+        if (!dataSource || dataSource.length === 0) {
+            return unref(dataSourceRef);
+        }
+        if (unref(getAutoCreateKey)) {
+            const firstItem = dataSource[0];
+            const lastItem = dataSource[dataSource.length - 1];
 
-  async function reload(opt?: FetchParams) {
-    return await fetch(opt);
-  }
+            if (firstItem && lastItem) {
+                if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
+                    const data = cloneDeep(unref(dataSourceRef));
+                    data.forEach((item) => {
+                        if (!item[ROW_KEY]) {
+                            item[ROW_KEY] = buildUUID();
+                        }
+                        if (item.children && item.children.length) {
+                            setTableKey(item.children);
+                        }
+                    });
+                    dataSourceRef.value = data;
+                }
+            }
+        }
+        return unref(dataSourceRef);
+    });
 
-  onMounted(() => {
-    useTimeoutFn(() => {
-      unref(propsRef).immediate && fetch();
-    }, 16);
-  });
+    async function updateTableData(index: number, key: string, value: any) {
+        const record = dataSourceRef.value[index];
+        if (record) {
+            dataSourceRef.value[index][key] = value;
+        }
+        return dataSourceRef.value[index];
+    }
 
-  return {
-    getDataSourceRef,
-    getDataSource,
-    getRawDataSource,
-    getRowKey,
-    setTableData,
-    getAutoCreateKey,
-    fetch,
-    reload,
-    updateTableData,
-    updateTableDataRecord,
-    deleteTableDataRecord,
-    insertTableDataRecord,
-    findTableDataRecord,
-    handleTableChange,
-  };
+    function updateTableDataRecord(
+        rowKey: string | number,
+        record: Recordable
+    ): Recordable | undefined {
+        const row = findTableDataRecord(rowKey);
+
+        if (row) {
+            for (const field in row) {
+                if (Reflect.has(record, field)) row[field] = record[field];
+            }
+            return row;
+        }
+    }
+
+    function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
+        if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+        const rowKeyName = unref(getRowKey);
+        if (!rowKeyName) return;
+        const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
+        for (const key of rowKeys) {
+            let index: number | undefined = dataSourceRef.value.findIndex((row) => {
+                let targetKeyName: string;
+                if (typeof rowKeyName === "function") {
+                    targetKeyName = rowKeyName(row);
+                } else {
+                    targetKeyName = rowKeyName as string;
+                }
+                return row[targetKeyName] === key;
+            });
+            if (index >= 0) {
+                dataSourceRef.value.splice(index, 1);
+            }
+            index = unref(propsRef).dataSource?.findIndex((row) => {
+                let targetKeyName: string;
+                if (typeof rowKeyName === "function") {
+                    targetKeyName = rowKeyName(row);
+                } else {
+                    targetKeyName = rowKeyName as string;
+                }
+                return row[targetKeyName] === key;
+            });
+            if (typeof index !== "undefined" && index !== -1)
+                unref(propsRef).dataSource?.splice(index, 1);
+        }
+        setPagination({
+            total: unref(propsRef).dataSource?.length
+        });
+    }
+
+    function insertTableDataRecord(record: Recordable, index: number): Recordable | undefined {
+        // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+        index = index ?? dataSourceRef.value?.length;
+        unref(dataSourceRef).splice(index, 0, record);
+        return unref(dataSourceRef);
+    }
+
+    function findTableDataRecord(rowKey: string | number) {
+        if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
+
+        const rowKeyName = unref(getRowKey);
+        if (!rowKeyName) return;
+
+        const { childrenColumnName = "children" } = unref(propsRef);
+
+        const findRow = (array: any[]) => {
+            let ret;
+            array.some(function iter(r) {
+                if (typeof rowKeyName === "function") {
+                    if ((rowKeyName(r) as string) === rowKey) {
+                        ret = r;
+                        return true;
+                    }
+                } else {
+                    if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
+                        ret = r;
+                        return true;
+                    }
+                }
+                return r[childrenColumnName] && r[childrenColumnName].some(iter);
+            });
+            return ret;
+        };
+
+        // const row = dataSourceRef.value.find(r => {
+        //   if (typeof rowKeyName === 'function') {
+        //     return (rowKeyName(r) as string) === rowKey
+        //   } else {
+        //     return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey
+        //   }
+        // })
+        return findRow(dataSourceRef.value);
+    }
+
+    async function fetch(opt?: FetchParams) {
+        const {
+            api,
+            searchInfo,
+            defSort,
+            fetchSetting,
+            beforeFetch,
+            afterFetch,
+            useSearchForm,
+            pagination
+        } = unref(propsRef);
+        if (!api || !isFunction(api)) return;
+        try {
+            setLoading(true);
+            const { pageField, sizeField, listField, totalField } = Object.assign(
+                {},
+                FETCH_SETTING,
+                fetchSetting
+            );
+            let pageParams: Recordable = {};
+
+            const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo) as PaginationProps;
+
+            if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+                pageParams = {};
+            } else {
+                pageParams[pageField] = (opt && opt.page) || current;
+                pageParams[sizeField] = pageSize;
+            }
+
+            const { sortInfo = {}, filterInfo } = searchState;
+            let params: Recordable = merge(
+                pageParams,
+                useSearchForm ? getFieldsValue() : {},
+                searchInfo,
+                opt?.searchInfo || searchFormData.value || {},
+                defSort,
+                sortInfo,
+                filterInfo,
+                opt?.sortInfo ?? {},
+                opt?.filterInfo ?? {}
+            );
+            if (beforeFetch && isFunction(beforeFetch)) {
+                params = (await beforeFetch(params)) || params;
+            }
+
+            const res = await api(params);
+            rawDataSourceRef.value = res;
+
+            const isArrayResult = Array.isArray(res);
+
+            let resultItems: Recordable[] = isArrayResult ? res : get(res, listField);
+            const resultTotal: number = isArrayResult ? res.length : get(res, totalField);
+
+            // 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
+            if (resultTotal) {
+                const currentTotalPage = Math.ceil(resultTotal / pageSize);
+                if (current > currentTotalPage) {
+                    setPagination({
+                        current: currentTotalPage
+                    });
+                    return await fetch(opt);
+                }
+            }
+
+            if (afterFetch && isFunction(afterFetch)) {
+                resultItems = (await afterFetch(resultItems)) || resultItems;
+            }
+            dataSourceRef.value = resultItems;
+            setPagination({
+                total: resultTotal || 0
+            });
+            if (opt && opt.page) {
+                setPagination({
+                    current: opt.page || 1
+                });
+            }
+            emit("fetch-success", {
+                items: unref(resultItems),
+                total: resultTotal
+            });
+            return resultItems;
+        } catch (error) {
+            emit("fetch-error", error);
+            dataSourceRef.value = [];
+            setPagination({
+                total: 0
+            });
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    function setTableData<T = Recordable>(values: T[]) {
+        dataSourceRef.value = values;
+    }
+
+    function getDataSource<T = Recordable>() {
+        return getDataSourceRef.value as T[];
+    }
+
+    function getRawDataSource<T = Recordable>() {
+        return rawDataSourceRef.value as T;
+    }
+
+    async function reload(opt?: FetchParams) {
+        return await fetch(opt);
+    }
+
+    function setSearchFormData(data) {
+        searchFormData.value = data;
+    }
+
+    onMounted(() => {
+        useTimeoutFn(() => {
+            unref(propsRef).immediate && fetch();
+        }, 16);
+    });
+
+    return {
+        getDataSourceRef,
+        getDataSource,
+        getRawDataSource,
+        getRowKey,
+        setTableData,
+        getAutoCreateKey,
+        fetch,
+        reload,
+        updateTableData,
+        updateTableDataRecord,
+        deleteTableDataRecord,
+        insertTableDataRecord,
+        findTableDataRecord,
+        handleTableChange,
+        setSearchFormData
+    };
 }