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

你可以使用React和Ant Design（antd）来实现一个可删除和增加的树级表格。下面是一个简单的示例代码：

首先，你需要安装React和Ant Design依赖：

npm install react antd

然后，你可以创建一个名为"TreeTable.js"的组件，并导入所需的依赖：

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

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

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Action',
      dataIndex: '',
      key: 'x',
      render: (_, record) =>
        data.length > 1 ? (
          <Button onClick={() => handleDelete(record.key)}>Delete</Button>
        ) : null,
    },
  ];

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

  return <Table columns={columns} dataSource={data} pagination={false} />;
};

export default TreeTable;

在这个示例中，我们使用useState钩子来存储表格的数据。数据是一个包含树级结构的数组。每个节点都有一个唯一的"key"属性。我们使用Ant Design的Table组件来展示数据，并设置了一个包含删除按钮的列。

当点击删除按钮时，我们会调用handleDelete函数来过滤掉被删除节点的数据，并更新表格的状态。

你可以在你的应用程序中使用TreeTable组件来展示一个树级的可删除和增加的表格：

import React from 'react';
import TreeTable from './TreeTable';

const App = () => {
  return (
    <div>
      <TreeTable />
    </div>
  );
};

export default App;

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望能帮助到你！