React Ant Design 表格自定义行实现数据编辑功能

你可以使用 Ant Design 的 Table 组件和自定义行来实现这个需求。下面是一个示例代码：

首先，你需要在你的 React 组件中导入需要的组件和样式：

import React, { useState } from 'react';
import { Table, Input, Button } from 'antd';
import 'antd/dist/antd.css';

然后，你可以定义一个表格的数据和自定义行的组件：

const data = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
  { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' }
];

const EditableRow = ({ index, ...props }) => {
  const [edit, setEdit] = useState(false);
  const [rowData, setRowData] = useState(props.rowData); // 自定行的数据

  const handleEdit = () => {
    setEdit(true);
  };

  const handleSave = () => {
    setEdit(false);
    // 保存修改后的数据
    props.saveRowData(index, rowData);
  };

  const handleChange = (e) => {
    // 更新自定行的数据
    setRowData({ ...rowData, [e.target.name]: e.target.value });
  };

  return (
    <tr {...props}>
      {edit ? (
        // 编辑状态下显示输入框
        <>
          <td>
            <Input
              name='name'
              value={rowData.name}
              onChange={handleChange}
            />
          </td>
          <td>
            <Input
              name='age'
              value={rowData.age}
              onChange={handleChange}
            />
          </td>
          <td>
            <Input
              name='address'
              value={rowData.address}
              onChange={handleChange}
            />
          </td>
          <td>
            <Button onClick={handleSave}>保存</Button>
          </td>
        </>
      ) : (
        // 非编辑状态下显示数据
        <>
          <td>{props.name}</td>
          <td>{props.age}</td>
          <td>{props.address}</td>
          <td>
            <Button onClick={handleEdit}>编辑</Button>
          </td>
        </>
      )}
    </tr>
  );
};

接下来，你可以在你的 React 组件中使用 Table 组件，并将自定义行作为 components 属性传递给 Table 组件：

const App = () => {
  const [tableData, setTableData] = useState(data);

  const saveRowData = (index, rowData) => {
    const newData = [...tableData];
    newData[index] = rowData;
    setTableData(newData);
  };

  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' }
  ];

  const components = {
    body: {
      row: EditableRow
    }
  };

  const tableColumns = columns.map((column) => ({
    ...column,
    ellipsis: true // 文本过长时自动省略
  }));

  return (
    <Table
      dataSource={tableData}
      columns={tableColumns}
      components={components}
      rowKey='key'
      saveRowData={saveRowData}
    />
  );
};

export default App;

在这个示例中，我们将 data 作为表格的数据，使用 useState 来管理表格数据的状态。同时，我们定义了一个 saveRowData 函数，用于保存修改后的自定行数据，并更新表格的数据状态。

在 EditableRow 组件中，我们使用 useState 来管理自定行的编辑状态和数据，并根据编辑状态来显示不同的内容。当点击编辑按钮时，编辑状态变为 true，输入框显示自定行的数据。当点击保存按钮时，编辑状态变为 false，保存修改后的数据。

最后，我们在 App 组件中使用 Table 组件，并传递了自定义的 components 和 saveRowData 函数作为属性。这样，当点击编辑按钮时，自定行会变成输入框，点击保存按钮时，会保存修改后的数据。

希望这个示例对你有帮助！