From e23e3383dd73b20a479977d29bab999c51334a1a Mon Sep 17 00:00:00 2001
From: xachary <179740385@qq.com>
Date: Fri, 12 Jan 2024 14:20:45 +0800
Subject: [PATCH] fix(BasicTable->rowKey&scroll): declear and usage about
 rowKey and scroll (#3541)

* fix(rowKey&scroll): declear and usage about rowKey and scroll

* fix: key/keyValue type declare fix
---
 .../Table/src/components/TableFooter.vue      | 49 ++++++++-------
 .../src/components/editable/EditableCell.vue  |  6 +-
 src/components/Table/src/helper.ts            | 28 +++++++++
 .../Table/src/hooks/useCustomRow.ts           | 47 +++++---------
 .../Table/src/hooks/useDataSource.ts          | 63 ++++++-------------
 .../Table/src/hooks/useRowSelection.ts        | 46 ++++++++------
 src/components/Table/src/hooks/useTable.ts    | 28 ++++-----
 .../Table/src/hooks/useTableExpand.ts         | 63 +++++++++----------
 .../Table/src/hooks/useTableFooter.ts         |  6 +-
 .../Table/src/hooks/useTableScroll.ts         |  2 +-
 src/components/Table/src/props.ts             | 14 ++---
 src/components/Table/src/types/table.ts       | 26 ++++----
 12 files changed, 184 insertions(+), 194 deletions(-)
 create mode 100644 src/components/Table/src/helper.ts

diff --git a/src/components/Table/src/components/TableFooter.vue b/src/components/Table/src/components/TableFooter.vue
index 71c10bb1..f1500acf 100644
--- a/src/components/Table/src/components/TableFooter.vue
+++ b/src/components/Table/src/components/TableFooter.vue
@@ -1,60 +1,61 @@
 <template>
   <Table
-    v-if="summaryFunc || summaryData"
+    v-if="!!props.summaryFunc || props.summaryData"
     :showHeader="false"
     :bordered="false"
     :pagination="false"
     :dataSource="getDataSource"
-    :rowKey="(r) => r[rowKey]"
+    :rowKey="props.rowKey"
     :columns="getColumns"
     tableLayout="fixed"
-    :scroll="scroll"
+    :scroll="props.scroll"
   />
 </template>
 <script lang="ts" setup>
-  import type { PropType } from 'vue';
   import { 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 type { BasicColumn, BasicTableProps } from '../types/table';
   import { INDEX_COLUMN_FLAG } from '../const';
-  import { propTypes } from '@/utils/propTypes';
   import { useTableContext } from '../hooks/useTableContext';
   import { ColumnType } from 'ant-design-vue/es/table/interface';
+  import { parseRowKey } from '../helper';
 
   defineOptions({ name: 'BasicTableFooter' });
 
-  const props = defineProps({
-    summaryFunc: {
-      type: Function as PropType<Fn>,
+  const props = withDefaults(
+    defineProps<{
+      summaryFunc?: Fn | null;
+      summaryData?: Recordable[] | null;
+      scroll?: BasicTableProps['scroll'];
+      rowKey?: BasicTableProps['rowKey'];
+    }>(),
+    {
+      summaryFunc: null,
+      summaryData: null,
+      rowKey: '',
     },
-    summaryData: {
-      type: Array as PropType<Recordable[]>,
-    },
-    scroll: {
-      type: Object as PropType<Recordable>,
-    },
-    rowKey: propTypes.string.def('key'),
-  });
+  );
 
   const SUMMARY_ROW_KEY = '_row';
   const SUMMARY_INDEX_KEY = '_index';
   const table = useTableContext();
 
   const getDataSource = computed((): Recordable[] => {
-    const { summaryFunc, summaryData } = props;
-    if (summaryData?.length) {
-      summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
-      return summaryData;
+    if (props.summaryData?.length) {
+      props.summaryData.forEach((item, i) => {
+        item[parseRowKey(props.rowKey, item)] = `${i}`;
+      });
+      return props.summaryData;
     }
-    if (!isFunction(summaryFunc)) {
+    if (!isFunction(props.summaryFunc)) {
       return [];
     }
     let dataSource = toRaw(unref(table.getDataSource()));
-    dataSource = summaryFunc(dataSource);
+    dataSource = props.summaryFunc(dataSource);
     dataSource.forEach((item, i) => {
-      item[props.rowKey] = `${i}`;
+      item[parseRowKey(props.rowKey, item)] = `${i}`;
     });
     return dataSource;
   });
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index e18d3d5e..fdcb55d9 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -16,6 +16,7 @@
   import { pick, set } from 'lodash-es';
   import { treeToList } from '@/utils/helper/treeHelper';
   import { Spin } from 'ant-design-vue';
+  import { parseRowKey } from '../../helper';
 
   export default defineComponent({
     name: 'EditableCell',
@@ -260,7 +261,8 @@
           const { getBindValues } = table;
 
           const { beforeEditSubmit, columns, rowKey } = unref(getBindValues);
-          const rowKeyValue = typeof rowKey === 'string' ? rowKey : rowKey ? rowKey(record) : '';
+
+          const rowKeyParsed = parseRowKey(rowKey, record);
 
           if (beforeEditSubmit && isFunction(beforeEditSubmit)) {
             spinning.value = true;
@@ -271,7 +273,7 @@
             let result: any = true;
             try {
               result = await beforeEditSubmit({
-                record: pick(record, [rowKeyValue, ...keys]),
+                record: pick(record, [rowKeyParsed, ...keys]),
                 index,
                 key: dataKey as string,
                 value,
diff --git a/src/components/Table/src/helper.ts b/src/components/Table/src/helper.ts
new file mode 100644
index 00000000..0bc326f5
--- /dev/null
+++ b/src/components/Table/src/helper.ts
@@ -0,0 +1,28 @@
+import { ROW_KEY } from './const';
+import type { BasicTableProps } from './types/table';
+
+export function parseRowKey<RecordType = any>(
+  rowKey: BasicTableProps['rowKey'],
+  record: RecordType,
+  autoCreateKey?: boolean,
+): number | string {
+  if (autoCreateKey) {
+    return ROW_KEY;
+  } else {
+    if (typeof rowKey === 'string') {
+      return rowKey;
+    } else if (rowKey) {
+      return rowKey(record);
+    } else {
+      return ROW_KEY;
+    }
+  }
+}
+
+export function parseRowKeyValue<RecordType = any>(
+  rowKey: BasicTableProps['rowKey'],
+  record: RecordType,
+  autoCreateKey?: boolean,
+): number | string {
+  return record[parseRowKey(rowKey, record, autoCreateKey)];
+}
diff --git a/src/components/Table/src/hooks/useCustomRow.ts b/src/components/Table/src/hooks/useCustomRow.ts
index a1620d7b..0d49e6e6 100644
--- a/src/components/Table/src/hooks/useCustomRow.ts
+++ b/src/components/Table/src/hooks/useCustomRow.ts
@@ -1,35 +1,18 @@
 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 { Key } from 'ant-design-vue/lib/table/interface';
 
+import { parseRowKeyValue } from '../helper';
+
 interface Options {
-  setSelectedRowKeys: (keys: Key[]) => void;
+  setSelectedRowKeys: (keyValues: Key[]) => void;
   getSelectRowKeys: () => Key[];
   clearSelectedRowKeys: () => void;
   emit: EmitType;
   getAutoCreateKey: ComputedRef<boolean | undefined>;
 }
 
-function getKey(
-  record: Recordable,
-  rowKey: string | ((record: Record<string, any>) => string) | undefined,
-  autoCreateKey?: boolean,
-) {
-  if (!rowKey || autoCreateKey) {
-    return record[ROW_KEY];
-  }
-  if (isString(rowKey)) {
-    return record[rowKey];
-  }
-  if (isFunction(rowKey)) {
-    return record[rowKey(record)];
-  }
-  return null;
-}
-
 export function useCustomRow(
   propsRef: ComputedRef<BasicTableProps>,
   { setSelectedRowKeys, getSelectRowKeys, getAutoCreateKey, clearSelectedRowKeys, emit }: Options,
@@ -41,9 +24,9 @@ export function useCustomRow(
         function handleClick() {
           const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef);
           if (!rowSelection || !clickToRowSelect) return;
-          const keys = getSelectRowKeys() || [];
-          const key = getKey(record, rowKey, unref(getAutoCreateKey));
-          if (key === null) return;
+          const keyValues = getSelectRowKeys() || [];
+          const keyValue = parseRowKeyValue(rowKey, record, unref(getAutoCreateKey));
+          if (!keyValue) return;
 
           const isCheckbox = rowSelection.type === 'checkbox';
           if (isCheckbox) {
@@ -55,24 +38,24 @@ export function useCustomRow(
             // 找到Checkbox，检查是否为disabled
             const checkBox = tr.querySelector('input[type=checkbox]');
             if (!checkBox || checkBox.hasAttribute('disabled')) return;
-            if (!keys.includes(key)) {
-              keys.push(key);
-              setSelectedRowKeys(keys);
+            if (!keyValues.includes(keyValue)) {
+              keyValues.push(keyValue);
+              setSelectedRowKeys(keyValues);
               return;
             }
-            const keyIndex = keys.findIndex((item) => item === key);
-            keys.splice(keyIndex, 1);
-            setSelectedRowKeys(keys);
+            const keyIndex = keyValues.findIndex((item) => item === keyValue);
+            keyValues.splice(keyIndex, 1);
+            setSelectedRowKeys(keyValues);
             return;
           }
 
           const isRadio = rowSelection.type === 'radio';
           if (isRadio) {
-            if (!keys.includes(key)) {
-              if (keys.length) {
+            if (!keyValues.includes(keyValue)) {
+              if (keyValues.length) {
                 clearSelectedRowKeys();
               }
-              setSelectedRowKeys([key]);
+              setSelectedRowKeys([keyValue]);
               return;
             }
             clearSelectedRowKeys();
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index dcb45298..2872b1de 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -16,6 +16,8 @@ import { buildUUID } from '@/utils/uuid';
 import { isFunction, isBoolean, isObject } from '@/utils/is';
 import { get, cloneDeep, merge } from 'lodash-es';
 import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
+import { parseRowKeyValue } from '../helper';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 interface ActionType {
   getPaginationInfo: ComputedRef<boolean | PaginationProps>;
@@ -138,7 +140,7 @@ export function useDataSource(
     return unref(dataSourceRef);
   });
 
-  async function updateTableData(index: number, key: string, value: any) {
+  async function updateTableData(index: number, key: Key, value: any) {
     const record = dataSourceRef.value[index];
     if (record) {
       dataSourceRef.value[index][key] = value;
@@ -146,11 +148,8 @@ export function useDataSource(
     return dataSourceRef.value[index];
   }
 
-  function updateTableDataRecord(
-    rowKey: string | number,
-    record: Recordable,
-  ): Recordable | undefined {
-    const row = findTableDataRecord(rowKey);
+  function updateTableDataRecord(keyValue: Key, record: Recordable): Recordable | undefined {
+    const row = findTableDataRecord(keyValue);
 
     if (row) {
       for (const field in row) {
@@ -160,34 +159,28 @@ export function useDataSource(
     }
   }
 
-  function deleteTableDataRecord(rowKey: string | number | string[] | number[]) {
+  function deleteTableDataRecord(keyValues: Key | Key[]) {
     if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
-    const rowKeyName = unref(getRowKey);
-    if (!rowKeyName) return;
-    const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
+    const delKeyValues = !Array.isArray(keyValues) ? [keyValues] : keyValues;
 
-    function deleteRow(data, key) {
-      const row: { index: number; data: [] } = findRow(data, key);
+    function deleteRow(data, keyValue) {
+      const row: { index: number; data: [] } = findRow(data, keyValue);
       if (row === null || row.index === -1) {
         return;
       }
       row.data.splice(row.index, 1);
 
-      function findRow(data, key) {
+      function findRow(data, keyValue) {
         if (data === null || data === undefined) {
           return null;
         }
         for (let i = 0; i < data.length; i++) {
           const row = data[i];
-          let targetKeyName: string = rowKeyName as string;
-          if (isFunction(rowKeyName)) {
-            targetKeyName = rowKeyName(row);
-          }
-          if (row[targetKeyName] === key) {
+          if (parseRowKeyValue(unref(getRowKey), row) === keyValue) {
             return { index: i, data };
           }
           if (row.children?.length > 0) {
-            const result = findRow(row.children, key);
+            const result = findRow(row.children, keyValue);
             if (result != null) {
               return result;
             }
@@ -197,9 +190,9 @@ export function useDataSource(
       }
     }
 
-    for (const key of rowKeys) {
-      deleteRow(dataSourceRef.value, key);
-      deleteRow(unref(propsRef).dataSource, key);
+    for (const keyValue of delKeyValues) {
+      deleteRow(dataSourceRef.value, keyValue);
+      deleteRow(unref(propsRef).dataSource, keyValue);
     }
     setPagination({
       total: unref(propsRef).dataSource?.length,
@@ -217,40 +210,22 @@ export function useDataSource(
     return unref(dataSourceRef);
   }
 
-  function findTableDataRecord(rowKey: string | number) {
+  function findTableDataRecord(keyValue: Key) {
     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;
-          }
+        if (parseRowKeyValue(unref(getRowKey), r) === keyValue) {
+          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);
   }
 
diff --git a/src/components/Table/src/hooks/useRowSelection.ts b/src/components/Table/src/hooks/useRowSelection.ts
index fdce6036..b24ee460 100644
--- a/src/components/Table/src/hooks/useRowSelection.ts
+++ b/src/components/Table/src/hooks/useRowSelection.ts
@@ -5,6 +5,7 @@ import { ROW_KEY } from '../const';
 import { omit } from 'lodash-es';
 import { findNodeAll } from '@/utils/helper/treeHelper';
 import type { Key } from 'ant-design-vue/lib/table/interface';
+import { parseRowKey, parseRowKeyValue } from '../helper';
 
 export function useRowSelection(
   propsRef: ComputedRef<BasicTableProps>,
@@ -31,13 +32,10 @@ export function useRowSelection(
         } else {
           // 点击 checkbox/radiobox 触发
 
-          // 取出【当前页】所有 keys
-          const rowKey = propsRef.value.rowKey;
-          const currentPageKeys = tableData.value.map(
-            (o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'],
-          );
+          // 取出【当前页】所有 keyValues
+          const currentPageKeys = tableData.value.map((o) => parseRowKeyValue(unref(getRowKey), o));
 
-          // 从【所有分页】已选的keys，且属于【当前页】的部分
+          // 从【所有分页】已选的 keyValues，且属于【当前页】的部分
           for (const selectedKey of selectedRowKeysRef.value.filter((k) =>
             currentPageKeys.includes(k),
           )) {
@@ -60,7 +58,7 @@ export function useRowSelection(
               // 新增勾选
               selectedRowKeysRef.value.push(selectedKey);
               const record = selectedRows.find(
-                (o) => o[(isFunction(rowKey) ? rowKey(o) : rowKey) || 'key'] === selectedKey,
+                (o) => parseRowKeyValue(unref(getRowKey), o) === selectedKey,
               );
               if (record) {
                 selectedRowRef.value.push(record);
@@ -113,30 +111,40 @@ export function useRowSelection(
     return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
   });
 
-  function setSelectedRowKeys(rowKeys?: Key[]) {
-    selectedRowKeysRef.value = rowKeys || [];
+  function setSelectedRowKeys(keyValues?: Key[]) {
+    selectedRowKeysRef.value = keyValues || [];
+    const rows = toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef)));
     const allSelectedRows = findNodeAll(
-      toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
-      (item) => rowKeys?.includes(item[unref(getRowKey) as string]),
+      rows,
+      (item) => keyValues?.includes(parseRowKeyValue(unref(getRowKey), item)),
       {
         children: propsRef.value.childrenColumnName ?? 'children',
       },
     );
     const trueSelectedRows: any[] = [];
-    rowKeys?.forEach((key: Key) => {
-      const found = allSelectedRows.find((item) => item[unref(getRowKey) as string] === key);
+    keyValues?.forEach((keyValue: Key) => {
+      const found = allSelectedRows.find(
+        (item) => parseRowKeyValue(unref(getRowKey), item) === keyValue,
+      );
       found && trueSelectedRows.push(found);
+      if (found) {
+        trueSelectedRows.push(found);
+      } else {
+        // 跨页的时候，非本页数据无法得到，暂如此处理
+        // tableData or selectedRowRef 总有数据
+        if (rows[0]) {
+          trueSelectedRows.push({ [parseRowKey(unref(getRowKey), rows[0])]: keyValue });
+        }
+      }
     });
     selectedRowRef.value = trueSelectedRows;
   }
 
   function setSelectedRows(rows: Recordable[]) {
-    const { rowKey } = unref(propsRef);
     selectedRowRef.value = rows;
-    selectedRowKeysRef.value = selectedRowRef.value.map((o) => {
-      const key = (isFunction(rowKey) ? rowKey(o) : rowKey) || 'key';
-      return o[key];
-    });
+    selectedRowKeysRef.value = selectedRowRef.value.map((o) =>
+      parseRowKeyValue(unref(getRowKey), o),
+    );
   }
 
   function clearSelectedRowKeys() {
@@ -144,7 +152,7 @@ export function useRowSelection(
     selectedRowKeysRef.value = [];
   }
 
-  function deleteSelectRowByKey(key: string) {
+  function deleteSelectRowByKey(key: Key) {
     const selectedRowKeys = unref(selectedRowKeysRef);
     const index = selectedRowKeys.findIndex((item) => item === key);
     if (index !== -1) {
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
index 6e22ecf3..196eecd9 100644
--- a/src/components/Table/src/hooks/useTable.ts
+++ b/src/components/Table/src/hooks/useTable.ts
@@ -102,8 +102,8 @@ export function useTable(tableProps?: Props): [
     setPagination: (info: Partial<PaginationProps>) => {
       return getTableInstance().setPagination(info);
     },
-    deleteSelectRowByKey: (key: string) => {
-      getTableInstance().deleteSelectRowByKey(key);
+    deleteSelectRowByKey: (keyValue: Key) => {
+      getTableInstance().deleteSelectRowByKey(keyValue);
     },
     getSelectRowKeys: () => {
       return toRaw(getTableInstance().getSelectRowKeys());
@@ -114,8 +114,8 @@ export function useTable(tableProps?: Props): [
     clearSelectedRowKeys: () => {
       getTableInstance().clearSelectedRowKeys();
     },
-    setSelectedRowKeys: (keys: (string | number)[]) => {
-      getTableInstance().setSelectedRowKeys(keys);
+    setSelectedRowKeys: (keyValues: Key[]) => {
+      getTableInstance().setSelectedRowKeys(keyValues);
     },
     getPaginationRef: () => {
       return getTableInstance().getPaginationRef();
@@ -126,17 +126,17 @@ export function useTable(tableProps?: Props): [
     updateTableData: (index: number, key: string, value: any) => {
       return getTableInstance().updateTableData(index, key, value);
     },
-    deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => {
-      return getTableInstance().deleteTableDataRecord(rowKey);
+    deleteTableDataRecord: (keyValues: Key | Key[]) => {
+      return getTableInstance().deleteTableDataRecord(keyValues);
     },
     insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => {
       return getTableInstance().insertTableDataRecord(record, index);
     },
-    updateTableDataRecord: (rowKey: string | number, record: Recordable) => {
-      return getTableInstance().updateTableDataRecord(rowKey, record);
+    updateTableDataRecord: (keyValue: Key, record: Recordable) => {
+      return getTableInstance().updateTableDataRecord(keyValue, record);
     },
-    findTableDataRecord: (rowKey: string | number) => {
-      return getTableInstance().findTableDataRecord(rowKey);
+    findTableDataRecord: (keyValue: Key) => {
+      return getTableInstance().findTableDataRecord(keyValue);
     },
     getRowSelection: () => {
       return toRaw(getTableInstance().getRowSelection());
@@ -159,11 +159,11 @@ export function useTable(tableProps?: Props): [
     collapseAll: () => {
       getTableInstance().collapseAll();
     },
-    expandRows: (keys: Key[]) => {
-      getTableInstance().expandRows(keys);
+    expandRows: (keyValues: Key[]) => {
+      getTableInstance().expandRows(keyValues);
     },
-    collapseRows: (keys: Key[]) => {
-      getTableInstance().collapseRows(keys);
+    collapseRows: (keyValues: Key[]) => {
+      getTableInstance().collapseRows(keyValues);
     },
     scrollTo: (pos: string) => {
       getTableInstance().scrollTo(pos);
diff --git a/src/components/Table/src/hooks/useTableExpand.ts b/src/components/Table/src/hooks/useTableExpand.ts
index a47d1468..5b03f296 100644
--- a/src/components/Table/src/hooks/useTableExpand.ts
+++ b/src/components/Table/src/hooks/useTableExpand.ts
@@ -2,13 +2,15 @@ import type { ComputedRef, Ref } from 'vue';
 import type { BasicTableProps } from '../types/table';
 import { computed, unref, ref, toRaw, nextTick } from 'vue';
 import { ROW_KEY } from '../const';
+import { parseRowKeyValue } from '../helper';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 export function useTableExpand(
   propsRef: ComputedRef<BasicTableProps>,
   tableData: Ref<Recordable[]>,
   emit: EmitType,
 ) {
-  const expandedRowKeys = ref<(string | number)[]>([]);
+  const expandedRowKeys = ref<Key[]>([]);
 
   const getAutoCreateKey = computed(() => {
     return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
@@ -25,68 +27,68 @@ export function useTableExpand(
 
     return {
       expandedRowKeys: unref(expandedRowKeys),
-      onExpandedRowsChange: (keys: string[]) => {
-        expandedRowKeys.value = keys;
-        emit('expanded-rows-change', keys);
+      onExpandedRowsChange: (keyValues: string[]) => {
+        expandedRowKeys.value = keyValues;
+        emit('expanded-rows-change', keyValues);
       },
     };
   });
 
   function expandAll() {
-    const keys = getAllKeys();
-    expandedRowKeys.value = keys;
+    const keyValues = getAllKeys();
+    expandedRowKeys.value = keyValues;
   }
 
   function collapseAll() {
     expandedRowKeys.value = [];
   }
 
-  function expandRows(keys: (string | number)[]) {
+  function expandRows(keyValues: Key[]) {
     // use row ID expands the specified table row
     const { isTreeTable, expandRowByClick } = unref(propsRef);
     if (!isTreeTable && !expandRowByClick) return;
-    expandedRowKeys.value = [...expandedRowKeys.value, ...keys];
+    expandedRowKeys.value = [...expandedRowKeys.value, ...keyValues];
   }
 
-  function collapseRows(keys: (string | number)[]) {
+  function collapseRows(keyValues: Key[]) {
     // use row ID collapses the specified table row
     const { isTreeTable, expandRowByClick } = unref(propsRef);
     if (!isTreeTable && !expandRowByClick) return;
-    expandedRowKeys.value = unref(expandedRowKeys).filter((key) => !keys.includes(key));
+    expandedRowKeys.value = unref(expandedRowKeys).filter(
+      (keyValue) => !keyValues.includes(keyValue),
+    );
   }
 
   function getAllKeys(data?: Recordable[]) {
-    const keys: string[] = [];
+    const keyValues: Array<number | string> = [];
     const { childrenColumnName } = unref(propsRef);
     toRaw(data || unref(tableData)).forEach((item) => {
-      keys.push(item[unref(getRowKey) as string]);
+      keyValues.push(parseRowKeyValue(unref(getRowKey), item));
       const children = item[childrenColumnName || 'children'];
       if (children?.length) {
-        keys.push(...getAllKeys(children));
+        keyValues.push(...getAllKeys(children));
       }
     });
-    return keys;
+    return keyValues;
   }
 
-  // 获取展开路径 keys
+  // 获取展开路径 keyValues
   function getKeyPaths(
     records: Recordable[],
-    rowKey: string,
     childrenColumnName: string,
-    key: string | number,
-    paths: Array<string | number>,
+    keyValue: Key,
+    paths: Array<Key>,
   ): boolean {
-    if (records.findIndex((record) => record[rowKey] === key) > -1) {
-      paths.push(key);
+    if (
+      records.findIndex((record) => parseRowKeyValue(unref(getRowKey), record) === keyValue) > -1
+    ) {
+      paths.push(keyValue);
       return true;
     } else {
       for (const record of records) {
         const children = record[childrenColumnName];
-        if (
-          Array.isArray(children) &&
-          getKeyPaths(children, rowKey, childrenColumnName, key, paths)
-        ) {
-          paths.push(record[rowKey]);
+        if (Array.isArray(children) && getKeyPaths(children, childrenColumnName, keyValue, paths)) {
+          paths.push(parseRowKeyValue(unref(getRowKey), record));
           return true;
         }
       }
@@ -95,10 +97,10 @@ export function useTableExpand(
   }
 
   // 手风琴展开
-  function expandRowAccordion(key: string | number, rowKey: string) {
+  function expandRowAccordion(keyValue: Key) {
     const { childrenColumnName } = unref(propsRef);
-    const paths: Array<string | number> = [];
-    getKeyPaths(tableData.value, rowKey, childrenColumnName || 'children', key, paths);
+    const paths: Array<Key> = [];
+    getKeyPaths(tableData.value, childrenColumnName || 'children', keyValue, paths);
     expandedRowKeys.value = paths;
   }
 
@@ -106,17 +108,14 @@ export function useTableExpand(
   function handleTableExpand(expanded, record) {
     // 手风琴开关
     // isTreeTable 或 expandRowByClick 时支持
-    // rowKey 是字符串时支持
     // 展开操作
     if (
       propsRef.value.accordion &&
       (propsRef.value.isTreeTable || propsRef.value.expandRowByClick) &&
-      typeof getRowKey.value === 'string' &&
       expanded
     ) {
-      const rowKey = getRowKey.value as string;
       nextTick(() => {
-        expandRowAccordion(record[rowKey], rowKey);
+        expandRowAccordion(parseRowKeyValue(unref(getRowKey), record));
       });
     }
   }
diff --git a/src/components/Table/src/hooks/useTableFooter.ts b/src/components/Table/src/hooks/useTableFooter.ts
index 39f60f9a..2e029f66 100644
--- a/src/components/Table/src/hooks/useTableFooter.ts
+++ b/src/components/Table/src/hooks/useTableFooter.ts
@@ -6,11 +6,7 @@ import { useEventListener } from '@/hooks/event/useEventListener';
 
 export function useTableFooter(
   propsRef: ComputedRef<BasicTableProps>,
-  scrollRef: ComputedRef<{
-    x: string | number | true;
-    y: string | number | null;
-    scrollToFirstRowOnChange: boolean;
-  }>,
+  scrollRef: ComputedRef<BasicTableProps['scroll']>,
   tableElRef: Ref<ComponentRef>,
   getDataSourceRef: ComputedRef<Recordable>,
 ) {
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
index 9a4d96a3..d0f6ee6c 100644
--- a/src/components/Table/src/hooks/useTableScroll.ts
+++ b/src/components/Table/src/hooks/useTableScroll.ts
@@ -264,7 +264,7 @@ export function useTableScroll(
       y: canResize ? tableHeight : null,
       scrollToFirstRowOnChange: false,
       ...scroll,
-    };
+    } as BasicTableProps['scroll'];
   });
 
   return { getScrollRef, redoHeight };
diff --git a/src/components/Table/src/props.ts b/src/components/Table/src/props.ts
index 5857683e..ebc05e8e 100644
--- a/src/components/Table/src/props.ts
+++ b/src/components/Table/src/props.ts
@@ -8,11 +8,13 @@ import type {
   TableCustomRecord,
   TableRowSelection,
   SizeType,
+  BasicTableProps,
 } from './types/table';
 import type { FormProps } from '@/components/Form';
 
 import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
 import { propTypes } from '@/utils/propTypes';
+import type { Key } from 'ant-design-vue/lib/table/interface';
 
 export const basicProps = {
   clickToRowSelect: { type: Boolean, default: true },
@@ -119,7 +121,7 @@ export const basicProps = {
     default: null,
   },
   rowKey: {
-    type: [String, Function] as PropType<string | ((record: Recordable) => string)>,
+    type: [String, Function] as PropType<BasicTableProps['rowKey']>,
     default: '',
   },
   bordered: propTypes.bool,
@@ -132,17 +134,11 @@ export const basicProps = {
     type: Function as PropType<(record: TableCustomRecord<any>, index: number) => string>,
   },
   scroll: {
-    type: Object as PropType<{ x: number | string | true; y: number | string }>,
-    default: null,
+    type: Object as PropType<PropType<BasicTableProps['scroll']>>,
   },
   beforeEditSubmit: {
     type: Function as PropType<
-      (data: {
-        record: Recordable;
-        index: number;
-        key: string | number;
-        value: any;
-      }) => Promise<any>
+      (data: { record: Recordable; index: number; key: Key; value: any }) => Promise<any>
     >,
   },
   size: {
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 2c0d2bf9..ed268f17 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -13,6 +13,8 @@ import { VueNode } from '@/utils/propTypes';
 import { RoleEnum } from '@/enums/roleEnum';
 import { FixedType } from 'ant-design-vue/es/vc-table/interface';
 
+import AntDesignVueTable from 'ant-design-vue/es/table';
+
 export declare type SortOrder = 'ascend' | 'descend';
 
 export interface TableCurrentDataSource<T = Recordable> {
@@ -22,8 +24,8 @@ export interface TableCurrentDataSource<T = Recordable> {
 export interface TableRowSelection<T = any> extends ITableRowSelection {
   /**
    * Callback executed when selected rows change
-   * @param selectedRowKeys 已选的keys
-   * @param selectedRows 已选的records
+   * @param selectedRowKeys 已选的 keyValues
+   * @param selectedRows 已选的 records
    * @param isClickCustomRow 是否是点击行触发（反之，就是点击checkbox/radiobox）
    * @returns void
    */
@@ -97,17 +99,17 @@ export interface TableActionType {
   clearSelectedRowKeys: () => void;
   expandAll: () => void;
   collapseAll: () => void;
-  expandRows: (keys: (string | number)[]) => void;
-  collapseRows: (keys: (string | number)[]) => void;
+  expandRows: (keyValues: Key[]) => void;
+  collapseRows: (keyValues: Key[]) => void;
   scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
   getSelectRowKeys: () => Key[];
-  deleteSelectRowByKey: (key: string) => void;
+  deleteSelectRowByKey: (keyValue: Key) => void;
   setPagination: (info: Partial<PaginationProps>) => void;
   setTableData: <T = Recordable>(values: T[]) => void;
-  updateTableDataRecord: (rowKey: string | number, record: Recordable) => Recordable | void;
-  deleteTableDataRecord: (rowKey: string | number | string[] | number[]) => void;
+  updateTableDataRecord: (keyValue: Key, record: Recordable) => Recordable | void;
+  deleteTableDataRecord: (keyValues: Key | Key[]) => void;
   insertTableDataRecord: (record: Recordable | Recordable[], index?: number) => Recordable[] | void;
-  findTableDataRecord: (rowKey: string | number) => Recordable | void;
+  findTableDataRecord: (keyValue: Key) => Recordable | void;
   getColumns: (opt?: GetColumnsParams) => BasicColumn[];
   setColumns: (columns: BasicColumn[] | string[]) => void;
   getDataSource: <T = Recordable>() => T[];
@@ -115,7 +117,7 @@ export interface TableActionType {
   setLoading: (loading: boolean) => void;
   setProps: (props: Partial<BasicTableProps>) => void;
   redoHeight: () => void;
-  setSelectedRowKeys: (rowKeys: Key[]) => void;
+  setSelectedRowKeys: (keyValues: Key[]) => void;
   getPaginationRef: () => PaginationProps | boolean;
   getSize: () => SizeType;
   getRowSelection: () => TableRowSelection<Recordable>;
@@ -214,7 +216,7 @@ export interface BasicTableProps<T = any> {
   // 在分页改变的时候清空选项
   clearSelectOnPageChange?: boolean;
   //
-  rowKey?: string | ((record: Recordable) => string);
+  rowKey?: InstanceType<typeof AntDesignVueTable>['$props']['rowKey'];
   // 数据
   dataSource?: Recordable[];
   // 标题右侧提示
@@ -328,7 +330,7 @@ export interface BasicTableProps<T = any> {
    * you need to add style .ant-table td { white-space: nowrap; }.
    * @type object
    */
-  scroll?: { x?: number | string | true; y?: number | string };
+  scroll?: InstanceType<typeof AntDesignVueTable>['$props']['scroll'];
 
   /**
    * Whether to show table header
@@ -395,7 +397,7 @@ export interface BasicTableProps<T = any> {
   beforeEditSubmit?: (data: {
     record: Recordable;
     index: number;
-    key: string | number;
+    key: Key;
     value: any;
   }) => Promise<any>;