修改 formily 包中的大数据 dome

Author: chenJJ-88

packages/docs/.vitepress/theme/react-demo.css

@@ -81,7 +81,6 @@
     transition: all 0.15s;
 }
 
-.react-demo-copy:hover {
-    background: rgba(128, 128, 128, 0.2);
-    color: var(--vp-c-text-1);
+.react-demo-preview table {
+    overflow: visible;
 }

packages/docs/demos/formily/LargeDataDemo.tsx

@@ -0,0 +1,118 @@
+import type { IColumn } from '@react-editable-tables/formily';
+import { createForm, FormilyEditableTable, FormProvider } from '@react-editable-tables/formily';
+import { Button, Input, InputNumber, Select } from 'antd';
+
+const departments = ['技术部', '产品部', '设计部', '市场部', '运营部'];
+const deptOptions = departments.map((d) => ({ label: d, value: d }));
+
+function generateItems(count: number) {
+    const names = ['张', '李', '王', '赵', '刘', '陈', '杨', '黄', '周', '吴'];
+    return Array.from({ length: count }, (_, i) => ({
+        name: `${names[i % names.length]}${String.fromCharCode(65 + (i % 26))}`,
+        age: 22 + (i % 30),
+        department: departments[i % departments.length],
+        salary: 8000 + (i % 10) * 1000,
+        remark: '',
+    }));
+}
+
+const form = createForm({
+    initialValues: { items: generateItems(500) },
+});
+
+const columns: IColumn[] = [
+    {
+        title: '序号',
+        key: '__index',
+        dataIndex: '__index',
+        width: 60,
+        fixed: 'left',
+        render: ({ index }) => <span style={{ color: '#999' }}>{index + 1}</span>,
+    },
+    {
+        title: '姓名',
+        width: 120,
+        render: () => (
+            <FormilyEditableTable.Field name="name" required parse={(e: any) => e?.target?.value ?? e}>
+                <Input />
+            </FormilyEditableTable.Field>
+        ),
+    },
+    {
+        title: '年龄',
+        width: 100,
+        render: () => (
+            <FormilyEditableTable.Field name="age">
+                <InputNumber style={{ width: '100%' }} min={1} max={100} />
+            </FormilyEditableTable.Field>
+        ),
+    },
+    {
+        title: '部门',
+        width: 130,
+        render: () => (
+            <FormilyEditableTable.Field name="department">
+                <Select options={deptOptions} style={{ width: '100%' }} />
+            </FormilyEditableTable.Field>
+        ),
+    },
+    {
+        title: '薪资',
+        width: 130,
+        render: () => (
+            <FormilyEditableTable.Field name="salary">
+                <InputNumber style={{ width: '100%' }} min={0} step={1000} />
+            </FormilyEditableTable.Field>
+        ),
+    },
+    {
+        title: '备注',
+        width: 120,
+        render: () => (
+            <FormilyEditableTable.Field name="remark" parse={(e: any) => e?.target?.value ?? e}>
+                <Input />
+            </FormilyEditableTable.Field>
+        ),
+    },
+    {
+        title: '操作',
+        key: '__ops',
+        dataIndex: '__ops',
+        width: 80,
+        fixed: 'right',
+        render: ({ index, field }) => (
+            <Button type="link" danger onClick={() => field.remove(index)}>
+                删除
+            </Button>
+        ),
+    },
+];
+
+export default function VirtualScrollDemo() {
+    const handleSubmit = async () => {
+        try {
+            await form.validate();
+            console.log('提交数据：', form.values);
+        } catch { }
+    };
+
+    return (
+        <FormProvider form={form}>
+            <FormilyEditableTable
+                name="items"
+                columns={columns}
+                addText="添加行"
+                itemDefaultValue={{ name: '', age: 25, department: undefined, salary: 8000, remark: '' }}
+                min={1}
+                pagination={{ pageSize: 50, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+                tableProps={{
+                    bordered: true,
+                    scroll: { x: 'max-content' },
+                }}
+            />
+            <Button type="primary" onClick={handleSubmit} style={{ marginTop: 16 }}>
+                提交
+            </Button>
+        </FormProvider>
+    );
+}

packages/docs/demos/formily/VirtualScrollDemo.tsx

@@ -1,27 +1,29 @@
 # 大数据量性能
 
 <script setup>
-import LargeDataDemo from '../demos/formily/LargeDataDemo.tsx'
-import LargeDataDemoSource from '../demos/formily/LargeDataDemo.tsx?raw'
+import VirtualScrollDemo from '../demos/formily/VirtualScrollDemo.tsx'
+import VirtualScrollDemoSource from '../demos/formily/VirtualScrollDemo.tsx?raw'
 </script>
 
 FormilyEditableTable 基于行级响应式更新，配合 antd Table 分页，使得 500+ 行数据也能保持良好性能。
 
-## 交互式示例
-
 <ClientOnly>
-  <ReactDemo :component="LargeDataDemo" :source="LargeDataDemoSource" title="500 行数据" description="500 行数据，antd Table 分页，每页 20 行" />
+  <ReactDemo :component="VirtualScrollDemo" :source="VirtualScrollDemoSource" title="500 行数据 + 固定列" description="500 行数据，分页，固定序号列和操作列，横向滚动" />
 </ClientOnly>
 
+```tsx
+columns={[
+  { title: '序号', width: 60, fixed: 'left', render: ({ index }) => index + 1 },
+  // ... 中间列
+  { title: '操作', width: 80, fixed: 'right', render: ({ index, field }) => ... },
+]}
+tableProps={{ scroll: { x: 'max-content' } }}
+```
+
+> **注意**：固定列必须配合 `scroll.x: 'max-content'` 使用，所有列都应设置明确的 `width`。
+
 ## 性能优化要点
 
 1. **行级响应式更新**：仅在行数增减时重渲染表格，单元格编辑不会触发整表重渲染
 2. **分页**：大数据量场景建议开启分页，默认每页 10 行
-
-```tsx
-<FormilyEditableTable
-  name="items"
-  pagination={{ pageSize: 20 }}
-  ...
-/>
-```
+3. **固定列**：所有列设置明确 `width`

packages/docs/formily/large-data.md

@@ -111,13 +111,12 @@ const FormilyEditableTableInner: React.FC<Omit<IFormilyEditableTableProps, 'name
                 const fieldIndex = (current - 1) * pageSize + index;
                 if (fieldIndex >= valueLenRef.current) return null;
 
-                const content = col.render ? (
-                    col.render({ index: fieldIndex, field } as IColumnRenderOpt)
-                ) : (
-                    <DefaultOperator index={fieldIndex} field={field} disabled={disableRemove} />
-                );
+                if (!col.render) {
+                    return <DefaultOperator index={fieldIndex} field={field} disabled={disableRemove} />;
+                }
+
+                const content = col.render?.({ index: fieldIndex, field } as IColumnRenderOpt);
 
-                // 行级 Field 上下文：使 <FormilyEditableTableField name="type"> 解析为 items.{fieldIndex}.type
                 return <Field name={String(fieldIndex)}>{content}</Field>;
             },
         }));