修改 native 中样式 bug，文档修改

chenJJ-88 · chenJJ-88 · commit b2ee37fd8a49 · 2026-06-01T14:46:32.000+08:00
diff --git a/packages/docs/demos/native/EditModeDemo.tsx b/packages/docs/demos/native/EditModeDemo.tsx
@@ -92,6 +92,7 @@ export default function EditModeDemo() {
                 切换到「行编辑」模式，修改城市字段后点「取消」，观察城市是否还原
             </p>
             <EditableTable<User>
+                bordered
                 rowKey="id"
                 dataSource={dataSource}
                 onChange={setDataSource}
diff --git a/packages/docs/native/api.md b/packages/docs/native/api.md
@@ -11,7 +11,7 @@
 | `editableMode` | `'all' \| 'row'` | `'all'` | 编辑模式 |
 | `onSubmit` | `(data: T[]) => void` | — | 提交回调，校验通过后触发 |
 | `validateTrigger` | `'submit' \| 'change'` | `'submit'` | 校验触发时机 |
-| `scrollY` | `number` | `500` | 虚拟滚动容器高度（px） |
+| `scrollY` | `number` | — | 虚拟滚动容器高度（px），传入时启用虚拟滚动 |
 | `emptyText` | `string` | `'暂无数据'` | 空数据提示文案 |
 | `className` | `string` | — | 容器类名 |
 | `style` | `CSSProperties` | — | 容器样式 |
@@ -27,7 +27,7 @@
 | `editable` | `boolean` | `true` | 是否可编辑 |
 | `editRender` | `(props: EditRenderProps<T>) => ReactNode` | — | 自定义编辑态渲染 |
 | `rules` | `Rule[]` | — | 校验规则 |
-| `onFieldChange` | `(value: any, row: T) => Partial<T> \| undefined` | — | 字段联动回调 |
+| `onFieldChange` | `(value: any, row: T) => Partial<T> \| undefined \| Promise<Partial<T> \| undefined>` | — | 字段联动回调，支持异步 |
 | `render` | `(value: any, row: T, rowIndex: number) => ReactNode` | — | 自定义只读态渲染 |
 
 ## EditRenderProps
@@ -58,7 +58,10 @@
 | 方法 | 参数 | 说明 |
 |------|------|------|
 | `addRow` | `defaults?: Partial<T>` | 在末尾新增一行 |
+| `insertRow` | `rowIndex: number, defaults?: Partial<T>` | 在指定位置插入一行 |
 | `removeRow` | `rowIndex: number` | 删除指定行 |
+| `updateRow` | `rowIndex: number, updates: Partial<T>` | 部分更新指定行数据 |
 | `moveUp` | `rowIndex: number` | 上移指定行 |
 | `moveDown` | `rowIndex: number` | 下移指定行 |
 | `getData` | — | 获取当前数据 |
+| `validateAll` | — | 全量校验，返回 `{ isValid: boolean; errors: Record<string, string> }` |
diff --git a/packages/docs/native/row-ops.md b/packages/docs/native/row-ops.md
@@ -69,7 +69,7 @@ tableRef.current?.removeRow(2);  // 删除第三行
 ```
 
 ::: warning 注意
-`rowIndex` 是数据数组的索引，不是页码索引。删除行后，后续行的索引会前移。
+`rowIndex` 是数据数组的索引，不是页码索引。
 :::
 
 ### moveUp(rowIndex)
@@ -100,6 +100,35 @@ tableRef.current?.moveDown(0);  // 第一行下移到第二行
 const currentData = tableRef.current?.getData();
 ```
 
+### insertRow(rowIndex, defaults?)
+
+在指定位置插入一行。
+
+```tsx
+tableRef.current?.insertRow(1, { id: 'new', name: '插入行', age: 0 });  // 在第二行位置插入
+```
+
+### updateRow(rowIndex, updates)
+
+部分更新指定行数据，不影响其他字段。
+
+```tsx
+tableRef.current?.updateRow(0, { name: '新名字' });  // 只更新第一行的 name
+```
+
+### validateAll()
+
+手动触发全量校验，返回校验结果。
+
+```tsx
+const { isValid, errors } = tableRef.current?.validateAll();
+if (isValid) {
+  // 校验通过
+} else {
+  console.log(errors);  // { 'rowId-fieldName': '错误信息' }
+}
+```
+
 ## 配合列固定使用
 
 行操作按钮通常放在固定列中，确保滚动时始终可见：
diff --git a/packages/editable-table/src/components/EditableTable/EditableTable.css b/packages/editable-table/src/components/EditableTable/EditableTable.css
@@ -94,6 +94,7 @@
 
 .et-body::-webkit-scrollbar {
     width: 6px;
+    height: 4px;
 }
 
 .et-body::-webkit-scrollbar-thumb {
diff --git a/packages/editable-table/src/components/EditableTable/index.tsx b/packages/editable-table/src/components/EditableTable/index.tsx
@@ -32,6 +32,8 @@ function EditableTable<T extends object = Record<string, unknown>>(
     const originalDataRef = useRef<Map<string, T>>(new Map());
     const dataRef = useRef<T[]>([]);
     dataRef.current = data;
+    const mountedRef = useRef(true);
+    useEffect(() => () => { mountedRef.current = false; }, []);
 
     const getColKey = useCallback((col: EditableColumn<T>, idx: number) => {
         if (col.key) return col.key;
@@ -59,15 +61,16 @@ function EditableTable<T extends object = Record<string, unknown>>(
     // ===== 校验 =====
     const validateAll = useCallback((): ValidateAllResult => {
         const allErrors: Record<string, string> = {};
-        data.forEach((row, rowIndex) => {
+        data.forEach((row) => {
+            const rowId = String(row[rowKey]);
             const rowErrors = validateRow(row, columns);
             for (const [dataIndex, msg] of Object.entries(rowErrors)) {
-                allErrors[`${rowIndex}-${dataIndex}`] = msg;
+                allErrors[`${rowId}-${dataIndex}`] = msg;
             }
         });
         setErrors(allErrors);
         return { isValid: Object.keys(allErrors).length === 0, errors: allErrors };
-    }, [data, columns]);
+    }, [data, columns, rowKey]);
 
     // ===== 通过 ref 暴露操作方法 =====
     useImperativeHandle(
@@ -84,18 +87,6 @@ function EditableTable<T extends object = Record<string, unknown>>(
             removeRow: (rowIndex) => {
                 setData((prev) => {
                     const next = prev.filter((_, i) => i !== rowIndex);
-                    // 重新映射错误索引
-                    setErrors((errs) => {
-                        const nextErrs: Record<string, string> = {};
-                        for (const [k, v] of Object.entries(errs)) {
-                            const dashIdx = k.indexOf('-');
-                            const ri = Number(k.slice(0, dashIdx));
-                            const rest = k.slice(dashIdx);
-                            if (ri < rowIndex) nextErrs[k] = v;
-                            else if (ri > rowIndex) nextErrs[`${ri - 1}${rest}`] = v;
-                        }
-                        return nextErrs;
-                    });
                     onChange?.(next);
                     return next;
                 });
@@ -108,18 +99,6 @@ function EditableTable<T extends object = Record<string, unknown>>(
                     onChange?.(next);
                     return next;
                 });
-                setErrors((prev) => {
-                    const next: Record<string, string> = {};
-                    for (const [k, v] of Object.entries(prev)) {
-                        const dashIdx = k.indexOf('-');
-                        const ri = Number(k.slice(0, dashIdx));
-                        const rest = k.slice(dashIdx);
-                        if (ri === rowIndex - 1) next[`${rowIndex}${rest}`] = v;
-                        else if (ri === rowIndex) next[`${rowIndex - 1}${rest}`] = v;
-                        else next[k] = v;
-                    }
-                    return next;
-                });
             },
             moveDown: (rowIndex) => {
                 if (rowIndex >= dataRef.current.length - 1) return;
@@ -129,18 +108,6 @@ function EditableTable<T extends object = Record<string, unknown>>(
                     onChange?.(next);
                     return next;
                 });
-                setErrors((prev) => {
-                    const next: Record<string, string> = {};
-                    for (const [k, v] of Object.entries(prev)) {
-                        const dashIdx = k.indexOf('-');
-                        const ri = Number(k.slice(0, dashIdx));
-                        const rest = k.slice(dashIdx);
-                        if (ri === rowIndex) next[`${rowIndex + 1}${rest}`] = v;
-                        else if (ri === rowIndex + 1) next[`${rowIndex}${rest}`] = v;
-                        else next[k] = v;
-                    }
-                    return next;
-                });
             },
             getData: () => dataRef.current,
             validateAll,
@@ -158,17 +125,6 @@ function EditableTable<T extends object = Record<string, unknown>>(
                 setData((prev) => {
                     const next = [...prev];
                     next.splice(rowIndex, 0, newRow);
-                    setErrors((errs) => {
-                        const nextErrs: Record<string, string> = {};
-                        for (const [k, v] of Object.entries(errs)) {
-                            const dashIdx = k.indexOf('-');
-                            const ri = Number(k.slice(0, dashIdx));
-                            const rest = k.slice(dashIdx);
-                            if (ri < rowIndex) nextErrs[k] = v;
-                            else nextErrs[`${ri + 1}${rest}`] = v;
-                        }
-                        return nextErrs;
-                    });
                     onChange?.(next);
                     return next;
                 });
@@ -201,6 +157,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
                     const rowId = String(currentRow[rowKey]);
                     linkedResult.then((updates) => {
                         if (!updates) return;
+                        if (!mountedRef.current) return;
                         setData((prev) => {
                             const idx = prev.findIndex((r) => String(r[rowKey]) === rowId);
                             if (idx === -1) return prev;
@@ -209,6 +166,8 @@ function EditableTable<T extends object = Record<string, unknown>>(
                             onChange?.(next);
                             return next;
                         });
+                    }).catch((err) => {
+                        console.error('[EditableTable] onFieldChange error', err);
                     });
                 } else if (linkedResult) {
                     setData((prev) => {
@@ -225,7 +184,8 @@ function EditableTable<T extends object = Record<string, unknown>>(
                     const row = dataRef.current[rowIndex];
                     const updatedRow = { ...row, [dataIndex]: value };
                     const err = validateValue(value, updatedRow, col.rules);
-                    const key = `${rowIndex}-${dataIndex}`;
+                    const rowId = String(row[rowKey]);
+                    const key = `${rowId}-${dataIndex}`;
                     setErrors((prev) => {
                         const next = { ...prev };
                         if (err) next[key] = err;
@@ -249,7 +209,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
             // 已在编辑中则不覆盖快照，保留最初的原始数据
             if (editingRows.has(id)) return;
             const row = data.find((r) => String(r[rowKey]) === id);
-            if (row) originalDataRef.current.set(id, { ...row });
+            if (row) originalDataRef.current.set(id, typeof structuredClone === 'function' ? structuredClone(row) : { ...row });
             setEditingRows((prev) => new Set(prev).add(id));
         },
         [data, rowKey, editingRows],
@@ -262,12 +222,12 @@ function EditableTable<T extends object = Record<string, unknown>>(
             const rowErrors = validateRow(data[rowIndex], columns);
             const rowKeyErrors: Record<string, string> = {};
             for (const [dataIndex, msg] of Object.entries(rowErrors)) {
-                rowKeyErrors[`${rowIndex}-${dataIndex}`] = msg;
+                rowKeyErrors[`${id}-${dataIndex}`] = msg;
             }
             setErrors((prev) => {
                 const next: Record<string, string> = {};
                 for (const [k, v] of Object.entries(prev)) {
-                    if (!k.startsWith(`${rowIndex}-`)) next[k] = v;
+                    if (!k.startsWith(`${id}-`)) next[k] = v;
                 }
                 Object.assign(next, rowKeyErrors);
                 return next;
@@ -297,15 +257,13 @@ function EditableTable<T extends object = Record<string, unknown>>(
                 });
             }
             originalDataRef.current.delete(id);
-            if (rowIndex !== -1) {
-                setErrors((prev) => {
-                    const n: Record<string, string> = {};
-                    for (const [k, v] of Object.entries(prev)) {
-                        if (!k.startsWith(`${rowIndex}-`)) n[k] = v;
-                    }
-                    return n;
-                });
-            }
+            setErrors((prev) => {
+                const n: Record<string, string> = {};
+                for (const [k, v] of Object.entries(prev)) {
+                    if (!k.startsWith(`${id}-`)) n[k] = v;
+                }
+                return n;
+            });
             setEditingRows((prev) => {
                 const n = new Set(prev);
                 n.delete(id);
@@ -343,7 +301,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
         const cols = columns.map((col) => {
             if (col.width) {
                 const w = typeof col.width === 'number' ? col.width : parseInt(col.width as string, 10) || 150;
-                return `minmax(${w}px, ${w}fr)`;
+                return `minmax(${w}px, 1fr)`;
             }
             return 'minmax(150px, 1fr)';
         }).join(' ');
@@ -359,22 +317,22 @@ function EditableTable<T extends object = Record<string, unknown>>(
             return 150;
         });
 
-        // 从左往右累计 left fixed
+        // 从左往右累计 left fixed（只累加已标记 fixed='left' 的列宽）
         let leftAcc = 0;
         for (let i = 0; i < columns.length; i++) {
             if (columns[i].fixed === 'left') {
                 offsets[i] = { left: leftAcc };
+                leftAcc += widths[i];
             }
-            leftAcc += widths[i];
         }
 
-        // 从右往左累计 right fixed
+        // 从右往左累计 right fixed（只累加已标记 fixed='right' 的列宽）
         let rightAcc = 0;
         for (let i = columns.length - 1; i >= 0; i--) {
             if (columns[i].fixed === 'right') {
                 offsets[i] = { right: rightAcc };
+                rightAcc += widths[i];
             }
-            rightAcc += widths[i];
         }
 
         return offsets;
@@ -492,7 +450,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
                                                         ? col.editable !== false
                                                         : isEditing && col.editable !== false;
                                                 const errorKey = colDataIndex
-                                                    ? `${virtualRow.index}-${colDataIndex}`
+                                                    ? `${id}-${colDataIndex}`
                                                     : undefined;
                                                 const offset = fixedOffsets[colIndex];
                                                 const isFixed = col.fixed === 'left' || col.fixed === 'right';
@@ -583,6 +541,8 @@ function EditableTable<T extends object = Record<string, unknown>>(
                                         style={{
                                             display: 'grid',
                                             gridTemplateColumns: gridTemplate,
+                                            width: 'fit-content',
+                                            minWidth: '100%',
                                         }}
                                     >
                                         {columns.map((col, colIndex) => {
@@ -594,7 +554,7 @@ function EditableTable<T extends object = Record<string, unknown>>(
                                                 editableMode === 'all'
                                                     ? col.editable !== false
                                                     : isEditing && col.editable !== false;
-                                            const errorKey = colDataIndex ? `${rowIndex}-${colDataIndex}` : undefined;
+                                            const errorKey = colDataIndex ? `${id}-${colDataIndex}` : undefined;
                                             const offset = fixedOffsets[colIndex];
                                             const isFixed = col.fixed === 'left' || col.fixed === 'right';
 

Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,7 @@`
`94`	`94`
`95`	`95`	`.et-body::-webkit-scrollbar {`
`96`	`96`	`width: 6px;`
	`97`	`+ height: 4px;`
`97`	`98`	`}`
`98`	`99`
`99`	`100`	`.et-body::-webkit-scrollbar-thumb {`