Antd 多层级嵌套表格：可输入、插入子节点和删除

以下是使用 Antd 生成一个多层级嵌套表格的示例代码：

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

const { Column } = Table;

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

  const handleAddChild = (record) => {
    const newData = [...data];
    const index = newData.findIndex(item => record.key === item.key);
    newData.splice(index + 1, 0, {
      key: `${record.key}-${newData[index].children.length + 1}`,
      name: '',
      children: [],
    });
    setData(newData);
  };

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

  const handleInputChange = (value, record) => {
    const newData = [...data];
    const index = newData.findIndex(item => record.key === item.key);
    newData[index].name = value;
    setData(newData);
  };

  return (
    <Table
      dataSource={data}
      pagination={false}
      expandable={{
        expandedRowRender: (record) => (
          <Table
            dataSource={record.children}
            pagination={false}
            size="small"
            bordered
          >
            <Column title="Name" dataIndex="name" key="name" />
            <Column
              title="Action"
              key="action"
              render={(text, record) => (
                <Button type="link" onClick={() => handleAddChild(record)}>
                  Add Child
                </Button>
              )}
            />
            <Column
              title="Action"
              key="action"
              render={(text, record) => (
                <Button type="link" onClick={() => handleDelete(record)}>
                  Delete
                </Button>
              )}
            />
          </Table>
        ),
        rowExpandable: record => record.children && record.children.length > 0,
      }}
      bordered
    >
      <Column
        title="Name"
        dataIndex="name"
        key="name"
        render={(text, record) => (
          <Input value={text} onChange={(e) => handleInputChange(e.target.value, record)} />
        )}
      />
      <Column
        title="Action"
        key="action"
        render={(text, record) => (
          <Button type="link" onClick={() => handleAddChild(record)}>
            Add Child
          </Button>
        )}
      />
      <Column
        title="Action"
        key="action"
        render={(text, record) => (
          <Button type="link" onClick={() => handleDelete(record)}>
            Delete
          </Button>
        )}
      />
    </Table>
  );
};

export default App;

在这个示例中，我们使用了 Antd 的 Table、Input 和 Button 组件来生成多层级嵌套的表格。第一列是可输入的，每一行都有一个 'Add Child' 按钮和一个 'Delete' 按钮，可以用来插入子节点表格和删除当前行。每一行的子节点表格使用了 expandedRowRender 属性来展示，并且只有当 record 的 children 属性存在且长度大于 0 时才可以展开。在插入子节点和删除行的操作中，我们通过更新 data 的状态来实现表格的重新渲染。