React Antd 表格：在每条数据下添加可编辑自定义行

要实现在每一条数据下新增一个空对象，可以在渲染表格数据时，将每条数据和空对象合并成一个新的数据数组。然后，通过遍历新的数据数组来渲染表格，并根据每条数据的特定字段来判断是否显示自定义行。

以下是一个示例代码，演示如何使用 antd 表格实现这个功能：

import React, { useState } from 'react';
import { Table, Input } from 'antd';

const data = [
  {
    id: 1,
    name: 'John',
    age: 30
  },
  {
    id: 2,
    name: 'Jane',
    age: 25
  }
];

const CustomRow = ({ editing, record }) => {
  const [name, setName] = useState(record.name);

  const handleInputChange = e => {
    setName(e.target.value);
  };

  return (
    <tr>
      <td>{record.id}</td>
      <td>
        {editing ? (
          <Input value={name} onChange={handleInputChange} />
        ) : (
          record.name
        )}
      </td>
      <td>{editing ? <button>Save</button> : <button>Edit</button>}</td>
    </tr>
  );
};

const App = () => {
  const [editingRow, setEditingRow] = useState(null);

  const handleEdit = record => {
    setEditingRow(record.id);
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: 'Name',
      dataIndex: 'name',
      render: (text, record) => (
        <CustomRow editing={editingRow === record.id} record={record} />
      )
    },
    {
      title: 'Age',
      dataIndex: 'age'
    },
    {
      title: 'Action',
      render: (_, record) => (
        <button onClick={() => handleEdit(record)}>Edit</button>
      )
    }
  ];

  // 合并每条数据和空对象
  const mergedData = data.flatMap(item => [item, {}]);

  return <Table dataSource={mergedData} columns={columns} />;
};

export default App;

在上面的示例代码中，定义了一个 CustomRow 组件作为自定义行，根据 editing 属性决定显示输入框还是文本，通过 handleEdit 函数来切换编辑状态。在 columns 中使用 CustomRow 渲染自定义行，并根据 editingRow 的值决定是否显示输入框。

最后，在渲染表格时，将原始数据和空对象合并成一个新的数组 mergedData，再将 mergedData 作为表格的 dataSource。这样，每一条数据下都会有一个空对象，用于显示自定义行。