Protable 树结构移除选中行

信铁寒胜：它里面这个迭代的思想还是比较有用的。

要在 ProTable 树形结构中实现移除选中行的功能，你需要做以下几步：

1. 在 ProTable 的父组件中定义数据源 data 和一个函数用于移除行。
2. 在 ProTable 组件中传入数据源和定义一个列，其中包含一个操作列，可以在该列中添加一个移除按钮。
3. 定义一个选中行的状态 selectedRowKeys，并在 ProTable 中设置 rowSelection 属性，用于控制行的选中状态。
4. 在移除按钮的点击事件处理函数中，调用父组件传递的移除行函数，从数据源中移除对应的行，并更新选中行的状态。
5. 更新数据源和选中行状态后，ProTable 会自动重新渲染，实现移除选中行的功能。

以下是一个示例代码：

 

import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Operation',
    valueType: 'option',
    render: (_, record) => (
      <a onClick={() => handleRemove(record)}>Remove</a>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John',
    age: 30,
    address: '123 Street, City',
    children: [
      {
        key: '1-1',
        name: 'Jack',
        age: 10,
        address: '123 Street, City',
      },
      {
        key: '1-2',
        name: 'Lucy',
        age: 7,
        address: '456 Avenue, Town',
      },
    ],
  },
  {
    key: '2',
    name: 'Jane',
    age: 25,
    address: '456 Avenue, Town',
    children: [
      {
        key: '2-1',
        name: 'Jim',
        age: 5,
        address: '789 Road, Village',
      },
    ],
  },
];

function MyTable() {
  const [dataSource, setDataSource] = useState(data);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const handleRemove = (record) => {
    const newData = removeRecord(dataSource, record);
    setDataSource(newData);
    setSelectedRowKeys([]);
  };

  const removeRecord = (data, record) => {
    return data.filter((item) => {
      if (item.key === record.key) {
        return false;
      } else if (item.children) {
        item.children = removeRecord(item.children, record);
        return true;
      } else {
        return true;
      }
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  };

  return (
    <ProTable
      columns={columns}
      dataSource={dataSource}
      rowSelection={rowSelection}
      pagination={false}
    />
  );
}

export default MyTable;

　　

在上面的示例中，我们定义了一个移除行的函数 handleRemove，用于移除选中的行。当用户点击操作列中的移除按钮时，会调用该函数来移除对应的行。然后更新数据源和选中行状态，并重新渲染 ProTable 组件。

我们还定义了一个递归函数 removeRecord，用于从树形结构中移除指定的行。

在 ProTable 中使用 rowSelection 属性来控制行的选中状态。selectedRowKeys 是选中行的状态，onChange 用于处理选中行改变时的事件。

希望这个示例对你有所帮助。如果有任何疑问，请随时提问。

 

转自：ChartGpt