使用 Arco Design 的 Table 组件实现可编辑列

以下是一个完整的 React 示例代码，展示如何实现可编辑的 Table 列，并使用 Input 组件和表单校验逻辑：

jsx 复制代码

import React, { useState } from 'react';
import { Table, Form, Input, Button, Message } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

const FormItem = Form.Item;

const App = () => {
  // 模拟数据源
  const [data, setData] = useState([
    { key: '1', name: 'John', age: 30 },
    { key: '2', name: 'Jane', age: 25 },
  ]);

  // 编辑状态管理
  const [editingKey, setEditingKey] = useState('');

  // 列配置
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      render: (text, record) => {
        const isEditing = record.key === editingKey;
        return isEditing ? (
          <FormItem
            name={`name-${record.key}`}
            initialValue={text}
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </FormItem>
        ) : (
          text
        );
      },
    },
    {
      title: 'Age',
      dataIndex: 'age',
      render: (text, record) => {
        const isEditing = record.key === editingKey;
        return isEditing ? (
          <FormItem
            name={`age-${record.key}`}
            initialValue={text}
            rules={[
              { required: true, message: '请输入年龄' },
              { type: 'number', message: '年龄必须是数字', transform: (value) => Number(value) },
            ]}
          >
            <Input />
          </FormItem>
        ) : (
          text
        );
      },
    },
    {
      title: '操作',
      render: (_, record) => {
        const isEditing = record.key === editingKey;
        return isEditing ? (
          <>
            <Button
              type="primary"
              onClick={() => save(record.key)}
              style={{ marginRight: 8 }}
            >
              保存
            </Button>
            <Button onClick={() => setEditingKey('')}>取消</Button>
          </>
        ) : (
          <Button
            type="text"
            onClick={() => setEditingKey(record.key)}
            disabled={editingKey !== ''}
          >
            编辑
          </Button>
        );
      },
    },
  ];

  // Form 实例
  const [form] = Form.useForm();

  // 保存编辑
  const save = async (key) => {
    try {
      const values = await form.validate();
      const updatedData = data.map((item) => {
        if (item.key === key) {
          return {
            ...item,
            name: values[`name-${key}`],
            age: values[`age-${key}`],
          };
        }
        return item;
      });
      setData(updatedData);
      setEditingKey('');
      Message.success('保存成功');
    } catch (error) {
      Message.error('校验失败，请检查输入');
    }
  };

  return (
    <Form form={form}>
      <Table
        columns={columns}
        data={data}
        rowKey="key"
        pagination={false}
      />
    </Form>
  );
};

export default App;

代码说明

数据源和状态管理：
- data 存储表格数据，editingKey 控制当前编辑的行。
- 每行通过 key 唯一标识。
列配置：
- name 和 age 列通过 render 函数判断是否处于编辑状态。
- 编辑状态下渲染 FormItem 和 Input，绑定表单字段（如 name-${record.key}）并设置校验规则。
- 非编辑状态下直接显示文本。
操作列：
- 提供"编辑"、"保存"和"取消"按钮。
- 编辑时，设置 editingKey 为当前行的 key；保存时，触发表单校验并更新数据；取消时，清空 editingKey。
表单校验：
- 使用 Form.useForm 创建表单实例，form.validate() 触发校验。
- 校验规则通过 rules 属性定义，例如必填、类型检查等。
保存逻辑：
- 校验通过后，提取表单值并更新数据源。
- 使用 Message 组件提示操作结果。

关键点

表单字段命名 ：为每行生成唯一的字段名（如 name-${key}），避免冲突。
编辑状态控制 ：通过 editingKey 确保同一时间只能编辑一行，防止多行同时编辑导致混乱。
校验逻辑：借助 Arco Design 的 Form 组件，轻松实现复杂的校验规则。
性能优化 ：如果表格数据量较大，建议使用虚拟滚动（Arco Table 支持 virtualList）。

扩展功能

批量编辑：
- 如果需要支持多行同时编辑，可以将 editingKey 改为一个 Set，存储多个编辑行的 key。
- 相应地调整保存逻辑，批量更新数据。
动态校验规则：
- 根据业务需求，为不同列设置更复杂的校验规则（如正则表达式、最小值/最大值等）。
其他输入组件：
- 可替换 Input 为其他 Arco 组件（如 Select、DatePicker），只需在 FormItem 中调整即可。
数据持久化：
- 保存后可通过 API 将数据发送到后端，结合 axios 或 fetch 实现。

运行环境

确保项目中已安装 Arco Design 和相关依赖：

bash 复制代码

npm install @arco-design/web-react

并引入 Arco 的 CSS 样式（如代码中的 @arco-design/web-react/dist/css/arco.css）。

注意事项

表单重置 ：编辑取消或保存后，调用 form.resetFields() 重置表单状态，避免残留数据。
性能问题 ：如果表格行数较多，建议使用 Arco Table 的 rowSelection 或分页功能优化体验。
错误处理：在保存时捕获校验错误，友好提示用户。