Ant Design 多层级嵌套表格实现：支持行内操作

以下是一个使用 Ant Design 的 Table 组件生成多层级嵌套表格的示例代码：

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

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    children: [
      {
        key: '1-1',
        name: 'Jim Green',
        age: 42,
        children: [
          {
            key: '1-1-1',
            name: 'Joe Black',
            age: 32,
          },
        ],
      },
    ],
  },
  {
    key: '2',
    name: 'Joe Black',
    age: 32,
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <Button onClick={() => handleAddChild(record)}>Add Child</Button>
    ),
  },
];

const NestedTable = () => {
  const [dataSource, setDataSource] = useState(data);

  const handleAddChild = (record) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => record.key === item.key);
    newData[index].children = newData[index].children || [];
    newData[index].children.push({
      key: `${record.key}-${newData[index].children.length + 1}`,
      name: '',
      age: '',
    });
    setDataSource(newData);
  };

  const handleDelete = (record) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => record.key === item.key);
    newData.splice(index, 1);
    setDataSource(newData);
  };

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      expandable={{
        expandedRowRender: (record) => (
          <NestedTable dataSource={record.children} />
        ),
      }}
      rowKey='key'
    />
  );
};

export default NestedTable;

在上面的示例中，data数组包含了表格的初始数据，每个对象都有一个children属性用于存储子节点数据。columns数组定义了表格的列，其中Action列包含了一个按钮，用于添加子节点。

handleAddChild函数用于在点击按钮时向当前行添加一个子节点。它首先复制数据源数组dataSource，然后找到当前行的索引，将新的子节点添加到对应的children数组中，并更新数据源。

handleDelete函数用于删除当前行。它也是先复制数据源数组，然后找到当前行的索引，使用splice方法将其从数组中删除，并更新数据源。

最后，使用Table组件渲染表格。expandable属性定义了展开行的渲染方式，当展开行时，会将子节点数据传递给嵌套的NestedTable组件进行渲染。rowKey属性用于指定每行的唯一标识。

你可以将上述代码放入你的React项目中，然后在需要的地方使用<NestedTable />组件来生成多层级嵌套的表格。