react antd实现一个树级的可删除增加表格

可以使用 React 和 Ant Design（antd）来实现一个树级可删除增加的表格。首先，你需要安装 React 和 antd，可以使用以下命令：

npm install react antd

然后，你可以按照以下步骤来实现：

1. 导入所需的组件和样式：

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

2. 创建一个包含表格数据的状态：

const [data, setData] = useState([
  { key: 1, name: 'Node 1', children: [] },
  { key: 2, name: 'Node 2', children: [] },
]);

3. 创建一个函数来处理添加子节点的操作：

const handleAddChild = (record) => {
  const newData = [...data];
  const newChild = { key: Date.now(), name: 'New Node', children: [] };
  const index = newData.findIndex((item) => record.key === item.key);
  newData[index].children.push(newChild);
  setData(newData);
};

4. 创建一个函数来处理删除节点的操作：

const handleDelete = (record) => {
  const newData = data.filter((item) => item.key !== record.key);
  setData(newData);
};

5. 创建表格的列配置：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Actions',
    key: 'actions',
    render: (_, record) => (
      <Space size="small">
        <Button type="primary" onClick={() => handleAddChild(record)}>
          Add Child
        </Button>
        <Button type="danger" onClick={() => handleDelete(record)}>
          Delete
        </Button>
      </Space>
    ),
  },
];

6. 渲染表格组件：

<Table
  dataSource={data}
  columns={columns}
  pagination={false}
  indentSize={30}
/>

完整的代码示例如下：

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

const App = () => {
  const [data, setData] = useState([
    { key: 1, name: 'Node 1', children: [] },
    { key: 2, name: 'Node 2', children: [] },
  ]);

  const handleAddChild = (record) => {
    const newData = [...data];
    const newChild = { key: Date.now(), name: 'New Node', children: [] };
    const index = newData.findIndex((item) => record.key === item.key);
    newData[index].children.push(newChild);
    setData(newData);
  };

  const handleDelete = (record) => {
    const newData = data.filter((item) => item.key !== record.key);
    setData(newData);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_, record) => (
        <Space size="small">
          <Button type="primary" onClick={() => handleAddChild(record)}>
            Add Child
          </Button>
          <Button type="danger" onClick={() => handleDelete(record)}>
            Delete
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <Table
      dataSource={data}
      columns={columns}
      pagination={false}
      indentSize={30}
    />
  );
};

export default App;

这样，你就可以在 React 应用中使用 Ant Design 创建一个树级的可删除增加的表格。