@ant-design/pro-components 3.1.12-0 → 3.1.13-0

package/lib/table/components/Alert/index.js

@@ -21,16 +21,20 @@ const defaultAlertOptionRender = props => {
     children: intl.getMessage('alert.clear', '清空')
   }, "0")];
 };
+
+/** 提到模块顶层，避免每次渲染重建函数导致 memo 失效 */
+const defaultAlertInfoRender = ({
+  intl,
+  selectedRowKeys
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+  children: [intl.getMessage('alert.selected', '已选择'), selectedRowKeys.length, intl.getMessage('alert.item', '项'), "\xA0\xA0"]
+});
 function TableAlert({
   selectedRowKeys = [],
   onCleanSelected,
   alwaysShowAlert,
   selectedRows,
-  alertInfoRender = ({
-    intl
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
-    children: [intl.getMessage('alert.selected', '已选择'), selectedRowKeys.length, intl.getMessage('alert.item', '项'), "\xA0\xA0"]
-  }),
+  alertInfoRender = defaultAlertInfoRender,
   alertOptionRender = defaultAlertOptionRender
 }) {
   const intl = (0, _provider.useIntl)();

package/lib/table/components/ColumnSetting/index.d.ts

@@ -2,7 +2,9 @@ import { type TableColumnType } from 'antd';
 import React from 'react';
 import type { SettingOptionType } from '../ToolBar';
 type ColumnSettingProps<T = any> = SettingOptionType & {
-    columns: TableColumnType<T>[];
+    columns: (TableColumnType<T> & {
+        index?: number;
+    })[];
 };
 declare function ColumnSetting<T>(props: ColumnSettingProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default ColumnSetting;

package/lib/table/components/ColumnSetting/index.js

@@ -147,7 +147,10 @@ const CheckboxList = ({
           checkedKeys.push(columnKey);
         }
       }
-      treeMap.set(key, {
+      // 必须用 columnKey（Tree 节点的 key）而非原始 column.key 存入 treeMap，
+      // 否则 onCheckTree.loopSetShow 通过 e.node.key（= columnKey）查父子关系时
+      // treeMap.get 永远返回 undefined，导致嵌套列的父子联动全部失效。
+      treeMap.set(columnKey, {
         ...item,
         parentKey: parentConfig?.columnKey
       });
@@ -199,20 +202,40 @@ const CheckboxList = ({
         ...newColumnMap[key]
       };
       newSetting.show = e.checked;
-      // 如果含有子节点，也要选中
+
+      // 如果含有子节点，也要同步子节点状态
       if (treeDataConfig.map?.get(key)?.children) {
         treeDataConfig.map.get(key)?.children?.forEach(item => loopSetShow(item.key));
       }
 
-      // 如果子节点选择，那父节点也应该选中
+      // 先写入当前节点，再检查父节点 —— 顺序至关重要：
+      // 父节点逻辑需要读取兄弟节点的最新状态，当前节点必须先写入 newColumnMap，
+      // 否则读到的仍是旧值，导致 allSiblingsUnchecked 判断出错。
+      newColumnMap[key] = newSetting;
+
+      // 勾选方向：子节点选中时父节点自动设为 true
+      // 取消方向：检查所有兄弟节点是否已全部取消，若是则父节点也取消
       const parentKey = treeDataConfig.map?.get(key)?.parentKey;
       if (parentKey) {
-        newColumnMap[parentKey] = {
-          ...newColumnMap[parentKey],
-          show: true
-        };
+        if (e.checked) {
+          newColumnMap[parentKey] = {
+            ...newColumnMap[parentKey],
+            show: true
+          };
+        } else {
+          const siblings = treeDataConfig.map?.get(parentKey)?.children ?? [];
+          const allSiblingsUnchecked = siblings.every(sibling => {
+            const siblingState = newColumnMap[sibling.key];
+            return siblingState && siblingState.show === false;
+          });
+          if (allSiblingsUnchecked) {
+            newColumnMap[parentKey] = {
+              ...newColumnMap[parentKey],
+              show: false
+            };
+          }
+        }
       }
-      newColumnMap[key] = newSetting;
     };
     loopSetShow(e.node.key);
     setColumnsMap({
@@ -345,9 +368,11 @@ const GroupCheckboxList = ({
   });
 };
 function ColumnSetting(props) {
-  const columnRef = (0, _react.useRef)(null);
   // 获得当前上下文的 hashID
   const counter = (0, _react.useContext)(_Provide.TableContext);
+  // 注意：括号必不可少。`&` 优先级低于数组类型后缀 `[]`，
+  // 若写成 `T & { ... }[]` 实际是「单个对象 & 数组」的交叉类型，
+  // 导致泛型 T 字段信息完全坍塌为 any[]（本轮修复的核心问题）。
   const localColumns = props.columns;
   const {
     checkedReset = true
@@ -357,11 +382,6 @@ function ColumnSetting(props) {
     setColumnsMap,
     clearPersistenceStorage
   } = counter;
-  (0, _react.useEffect)(() => {
-    if (counter.propsRef.current?.columnsState?.value) {
-      columnRef.current = JSON.parse(JSON.stringify(counter.propsRef.current?.columnsState?.value || {}));
-    }
-  }, []);
 
   /**
    * 设置全部选中，或全部未选中
@@ -409,14 +429,31 @@ function ColumnSetting(props) {
   /** 重置项目 */
   const clearClick = (0, _utils.useRefFunction)(() => {
     clearPersistenceStorage?.();
-    setColumnsMap(counter.propsRef.current?.columnsState?.defaultValue || columnRef.current || counter.defaultColumnKeyMap);
+    // 直接从 propsRef 读取最新 columnsState.value，消除 mount-only 缓存的 stale 问题：
+    // 若父组件后续更新 columnsState.value，columnsState.defaultValue 优先，
+    // 然后是 columnsState.value 的当前值，最后 fallback 到 defaultColumnKeyMap。
+    setColumnsMap(counter.propsRef.current?.columnsState?.defaultValue || counter.propsRef.current?.columnsState?.value || counter.defaultColumnKeyMap);
   });
 
-  // 未选中的 key 列表
-  const unCheckedKeys = Object.values(columnsMap).filter(value => !value || value.show === false);
+  // 未选中的 key 列表 —— 从 localColumns（当前可见列）派生，而非从 columnsMap 全量
+  // 派生。columnsMap 可能含有 hideInSetting 列或运行时被删掉的「过期 key」，导致分子
+  // 与分母（localColumns.length）不对齐，indeterminate 计算出现偏差。
+  const unCheckedKeys = (0, _react.useMemo)(() => {
+    return localColumns.filter(({
+      key,
+      dataIndex
+    }, index) => {
+      const columnKey = (0, _index.genColumnKey)(key ?? dataIndex, index);
+      const state = columnsMap?.[columnKey];
+      return state && state.show === false;
+    });
+  }, [columnsMap, localColumns]);
+
+  // 是否全部列都已选中
+  const allChecked = unCheckedKeys.length === 0 && localColumns.length > 0;
 
-  // 是否已经选中
-  const indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== localColumns.length;
+  // 是否部分选中（indeterminate）
+  const indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length < localColumns.length;
   const intl = (0, _provider.useIntl)();
   const {
     getPrefixCls
@@ -432,7 +469,7 @@ function ColumnSetting(props) {
       className: (0, _clsx.clsx)(`${className}-title`, hashId),
       children: [props.checkable === false ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox, {
         indeterminate: indeterminate,
-        checked: unCheckedKeys.length === 0 && unCheckedKeys.length !== localColumns.length,
+        checked: allChecked,
         onChange: e => {
           checkedAll(e);
         },

package/lib/table/components/DragSortTable/index.js

@@ -11,7 +11,9 @@ var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../utils");
 var _Table = _interopRequireDefault(require("../../Table"));
+var _utils2 = require("../../utils");
 var _useDragSort = require("../../utils/useDragSort");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,7 +33,7 @@ function DragSortTable(props) {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
   const [dataSource, setDataSourceInner] = (0, _util.useControlledState)(() => defaultData || [], originDataSource);
-  const setDataSource = (0, _react.useCallback)(updater => {
+  const setDataSource = (0, _utils.useRefFunction)(updater => {
     setDataSourceInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
       // 使用 queueMicrotask 延迟回调，避免在渲染期间更新其他组件状态
@@ -40,15 +42,20 @@ function DragSortTable(props) {
       });
       return next;
     });
-  }, [onDataSourceChange]);
+  });
   const {
     wrapSSR,
     hashId
   } = (0, _style.useStyle)(getPrefixCls('pro-table-drag'));
+  const wrapOnload = (0, _utils.useRefFunction)(async ds => {
+    setDataSource(ds);
+    return onLoad?.(ds);
+  });
 
-  // 默认拖拽把手
+  // 用 useMemo 稳定 DragHandle 组件身份：deps 包含所有闭包变量
   const DragHandle = (0, _react.useMemo)(() => {
-    return dragHandleProps => {
+    const dragHandlePrefixCls = getPrefixCls('pro-table-drag-icon');
+    return function DragHandleInner(dragHandleProps) {
       const {
         rowData: _rowData,
         index: _index,
@@ -57,7 +64,7 @@ function DragSortTable(props) {
       } = dragHandleProps;
       const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HolderOutlined, {
         ...rest,
-        className: (0, _clsx.clsx)(getPrefixCls('pro-table-drag-icon'), className, hashId)
+        className: (0, _clsx.clsx)(dragHandlePrefixCls, className, hashId)
       });
       const handel = dragSortHandlerRender ? dragSortHandlerRender(dragHandleProps?.rowData, dragHandleProps?.index) : defaultDom;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -65,7 +72,18 @@ function DragSortTable(props) {
         children: handel
       });
     };
-  }, [getPrefixCls]);
+  }, [getPrefixCls, hashId, dragSortHandlerRender]);
+  const processedColumns = (0, _react.useMemo)(() => otherProps.columns?.map(item => {
+    if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
+      return {
+        ...item,
+        render: item.render ?? (() => null)
+      };
+    }
+    return item;
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [otherProps.columns, dragSortKey]);
 
   // 使用自定义hooks获取拖拽相关组件的components集合
   const {
@@ -79,25 +97,14 @@ function DragSortTable(props) {
     rowKey,
     DragHandle
   });
-  const wrapOnload = async ds => {
-    setDataSource(ds);
-    return onLoad?.(ds);
-  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
     ...otherProps,
-    columns: otherProps.columns?.map(item => {
-      if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
-        if (!item.render) {
-          item.render = () => null;
-        }
-      }
-      return item;
-    }),
+    columns: processedColumns,
     onLoad: wrapOnload,
     rowKey: rowKey,
     tableViewRender: (_, defaultDom) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(DndContext, {
-        children: defaultDom
+        children: (0, _utils2.resolveTableViewDefaultDom)(defaultDom)
       });
     },
     dataSource: dataSource,

package/lib/table/components/Dropdown/index.d.ts

@@ -1,10 +1,9 @@
-import type { MenuItemProps } from 'antd';
 import React from 'react';
-interface MenuItems extends MenuItemProps {
+export type MenuItems = {
     name: React.ReactNode;
     key: string;
-    title?: string;
-}
+    disabled?: boolean;
+};
 export type DropdownProps = {
     className?: string;
     style?: React.CSSProperties;
@@ -14,8 +13,6 @@ export type DropdownProps = {
 };
 /**
  * 一个简单的下拉菜单
- *
- * @param param0
  */
 declare const DropdownButton: React.FC<DropdownProps>;
 declare const TableDropdown: React.FC<DropdownProps> & {

package/lib/table/components/Dropdown/index.js

@@ -10,10 +10,21 @@ var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
+/** 将 menus 转换为 antd Menu items 格式 */
+function buildMenuItems(menus = []) {
+  return menus.map(({
+    key,
+    name,
+    disabled
+  }) => ({
+    key,
+    label: name,
+    disabled
+  }));
+}
+
 /**
  * 一个简单的下拉菜单
- *
- * @param param0
  */
 const DropdownButton = ({
   children,
@@ -25,16 +36,15 @@ const DropdownButton = ({
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  const tempClassName = getPrefixCls('pro-table-dropdown');
+  const prefixCls = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
     menu: {
-      onClick: params => onSelect && onSelect(params.key),
-      items: menus?.map(item => ({
-        label: item.name,
-        key: item.key
-      }))
+      onClick: ({
+        key
+      }) => onSelect?.(key),
+      items: buildMenuItems(menus)
     },
-    className: (0, _clsx.clsx)(tempClassName, className),
+    className: (0, _clsx.clsx)(prefixCls, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, {
       style: style,
       children: [children, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
@@ -45,31 +55,22 @@ const TableDropdown = ({
   className: propsClassName,
   style,
   onSelect,
-  menus = [],
+  menus,
   children
 }) => {
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  const className = getPrefixCls('pro-table-dropdown');
+  const prefixCls = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
     menu: {
-      onClick: params => {
-        onSelect?.(params.key);
-      },
-      items: menus.map(({
-        key,
-        name,
-        ...rest
-      }) => ({
-        key,
-        ...rest,
-        title: rest.title,
-        label: name
-      }))
+      onClick: ({
+        key
+      }) => onSelect?.(key),
+      items: buildMenuItems(menus)
     },
-    className: (0, _clsx.clsx)(className, propsClassName),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    className: (0, _clsx.clsx)(prefixCls, propsClassName),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       style: style,
       children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EllipsisOutlined, {})
     })

package/lib/table/components/EditableTable/CellEditorTable.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ParamsType } from '../../../provider';
 import { EditableProTableProps } from './index';
-export declare function CellEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+export declare function CellEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): React.JSX.Element;

package/lib/table/components/EditableTable/CellEditorTable.js

@@ -1,58 +1,82 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CellEditorTable = CellEditorTable;
-var _react = _interopRequireDefault(require("react"));
+var _util = require("@rc-component/util");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../utils");
+var _utils2 = require("../../utils");
 var _index = _interopRequireDefault(require("./index"));
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 生成列的唯一标识，用于精确匹配当前正在编辑的单元格所属列。
+ * 同时使用 columnsIndex 避免 dataIndex/key 缺失或碰撞的问题。
+ */function buildColumnIdentifier(columnIndex, dataIndex, key) {
+  const base = dataIndex ?? key;
+  if (base === undefined) return `__col_${columnIndex}`;
+  return `${columnIndex}:${[base].flat(1).join('.')}`;
+}
 function CellEditorTable(props) {
-  const [editableKeys, setEditableRowKeys] = _react.default.useState([]);
-  const [dataIndex, setDataIndex] = _react.default.useState([]);
+  const [editableKeys, setEditableRowKeys] = (0, _util.useControlledState)(() => props.editable?.editableKeys ?? [], props.editable?.editableKeys);
+  const [activeColumnId, setActiveColumnId] = _react.default.useState('');
+
+  // 用于延迟退出编辑的定时器，避免点击下拉面板等场景误关编辑态
+  const blurTimerRef = (0, _react.useRef)();
   const rowKey = props.rowKey || 'id';
 
   // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const getRowKey = (0, _react.useMemo)(() => (0, _utils2.buildEditableTableRowKey)(rowKey, props.name), [props.name, rowKey]);
+  const handleEditableKeysChange = (0, _utils.useRefFunction)(keys => {
+    const cleanKeys = keys.filter(key => key !== undefined);
+    setEditableRowKeys(cleanKeys);
+    const editingPayload = (0, _utils2.resolveEditingPayloadForRowEditableOnChange)(cleanKeys, props.value, getRowKey, props.editable?.type);
+    props.editable?.onChange?.(cleanKeys, editingPayload);
+  });
+  const scheduleExitEditing = (0, _react.useCallback)(() => {
+    blurTimerRef.current = setTimeout(() => {
+      handleEditableKeysChange([]);
+      setActiveColumnId('');
+    }, 150);
+  }, [handleEditableKeysChange]);
+  const cancelExitEditing = (0, _react.useCallback)(() => {
+    if (blurTimerRef.current) {
+      clearTimeout(blurTimerRef.current);
+      blurTimerRef.current = undefined;
     }
-    return (record, index) => {
-      if (index === -1) {
-        return record?.[rowKey];
-      }
-      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
-      if (props.name) {
-        return index?.toString();
-      }
-      return record?.[rowKey] ?? index?.toString();
+  }, []);
+
+  // 缓存 columns 避免每次 render 生成全新数组触发 antd Table 大面积 diff
+  const columns = (0, _react.useMemo)(() => props?.columns?.map((item, columnIndex) => {
+    const columnId = buildColumnIdentifier(columnIndex, item.dataIndex, item.key);
+    return {
+      ...item,
+      editable: activeColumnId === columnId ? undefined : false,
+      onCell: (record, rowIndex) => ({
+        onDoubleClick: () => {
+          cancelExitEditing();
+          handleEditableKeysChange([getRowKey(record, rowIndex)]);
+          setActiveColumnId(columnId);
+        },
+        onBlur: scheduleExitEditing,
+        onFocus: cancelExitEditing
+      })
     };
-  }, [props.name, rowKey]);
+  }) ?? [],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.columns, activeColumnId, getRowKey, scheduleExitEditing, cancelExitEditing, handleEditableKeysChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
     bordered: true,
     pagination: false,
     ...props,
     editable: {
-      editableKeys,
-      ...props.editable
+      ...props.editable,
+      editableKeys
     },
-    columns: props?.columns?.map(item => {
-      return {
-        ...item,
-        editable: dataIndex.flat(1).join('.') === [item.dataIndex || item.key].flat(1).join('.') ? undefined : false,
-        onCell: (record, rowIndex) => {
-          return {
-            onDoubleClick: () => {
-              setEditableRowKeys([getRowKey(record, rowIndex)]);
-              setDataIndex([item.dataIndex || item.key]);
-            },
-            onBlur: () => {
-              setEditableRowKeys([]);
-            }
-          };
-        }
-      };
-    }) || []
+    columns: columns
   });
 }

package/lib/table/components/EditableTable/RowEditorTable.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ParamsType } from '../../../provider';
 import { EditableProTableProps } from './index';
-export declare function RowEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+export declare function RowEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): React.JSX.Element;

package/lib/table/components/EditableTable/RowEditorTable.js

@@ -1,55 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowEditorTable = RowEditorTable;
-var _react = _interopRequireDefault(require("react"));
+var _util = require("@rc-component/util");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../utils");
+var _utils2 = require("../../utils");
 var _index = _interopRequireDefault(require("./index"));
 var _jsxRuntime = require("react/jsx-runtime");
 function RowEditorTable(props) {
-  const [editableKeys, setEditableRowKeys] = _react.default.useState([]);
+  const [editableKeys, setEditableRowKeys] = (0, _util.useControlledState)(() => props.editable?.editableKeys ?? [], props.editable?.editableKeys);
+
+  // 用于延迟退出编辑的定时器，避免 Tab 切换字段时误关编辑态
+  const blurTimerRef = (0, _react.useRef)();
   const rowKey = props.rowKey || 'id';
 
   // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const getRowKey = (0, _react.useMemo)(() => (0, _utils2.buildEditableTableRowKey)(rowKey, props.name), [props.name, rowKey]);
+  const handleEditableKeysChange = (0, _utils.useRefFunction)(keys => {
+    const cleanKeys = keys.filter(key => key !== undefined);
+    setEditableRowKeys(cleanKeys);
+    const editingPayload = (0, _utils2.resolveEditingPayloadForRowEditableOnChange)(cleanKeys, props.value, getRowKey, props.editable?.type);
+    props.editable?.onChange?.(cleanKeys, editingPayload);
+  });
+  const scheduleExitEditing = (0, _react.useCallback)(() => {
+    // 延迟退出编辑态：如果焦点在同一行内的字段间切换（Tab），
+    // 新字段的 onFocus 会在 blur 的 setTimeout 回调之前触发，
+    // 从而取消定时器、保持编辑态。
+    blurTimerRef.current = setTimeout(() => {
+      handleEditableKeysChange([]);
+    }, 150);
+  }, [handleEditableKeysChange]);
+  const cancelExitEditing = (0, _react.useCallback)(() => {
+    if (blurTimerRef.current) {
+      clearTimeout(blurTimerRef.current);
+      blurTimerRef.current = undefined;
     }
-    return (record, index) => {
-      if (index === -1) {
-        return record?.[rowKey];
-      }
-      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
-      if (props.name) {
-        return index?.toString();
-      }
-      return record?.[rowKey] ?? index?.toString();
-    };
-  }, [props.name, rowKey]);
+  }, []);
+
+  // 缓存 columns 避免每次 render 生成全新数组触发 antd Table 大面积 diff
+  const columns = (0, _react.useMemo)(() => props?.columns?.map(item => ({
+    ...item,
+    onCell: (record, rowIndex) => ({
+      onDoubleClick: () => {
+        cancelExitEditing();
+        handleEditableKeysChange([getRowKey(record, rowIndex)]);
+      },
+      onBlur: scheduleExitEditing,
+      onFocus: cancelExitEditing
+    })
+  })) ?? [],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.columns, getRowKey, scheduleExitEditing, cancelExitEditing, handleEditableKeysChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
     bordered: true,
     pagination: false,
     ...props,
     editable: {
-      editableKeys,
-      ...props.editable
+      ...props.editable,
+      editableKeys
     },
-    columns: props?.columns?.map(item => {
-      return {
-        ...item,
-        onCell: (record, rowIndex) => {
-          return {
-            onDoubleClick: () => {
-              setEditableRowKeys([getRowKey(record, rowIndex)]);
-            },
-            onBlur: () => {
-              setEditableRowKeys([]);
-            }
-          };
-        }
-      };
-    }) || []
+    columns: columns
   });
 }

package/lib/table/components/EditableTable/index.d.ts

@@ -83,7 +83,7 @@ export type EditableProTableProps<T, U extends ParamsType, ValueType = 'text'> =
  * A React component that is used to create a table.
  * @param props
  */
-declare function FieldEditableTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+declare function FieldEditableTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): React.JSX.Element;
 declare namespace FieldEditableTable {
     var RecordCreator: <T = Record<string, any>>(props: RecordCreatorProps<T> & {
         children: React.JSX.Element;