信铁寒胜:它里面这个迭代的思想还是比较有用的。
要在 ProTable
树形结构中实现移除选中行的功能,你需要做以下几步:
- 在 ProTable 的父组件中定义数据源
data
和一个函数用于移除行。 - 在 ProTable 组件中传入数据源和定义一个列,其中包含一个操作列,可以在该列中添加一个移除按钮。
- 定义一个选中行的状态
selectedRowKeys
,并在 ProTable 中设置rowSelection
属性,用于控制行的选中状态。 - 在移除按钮的点击事件处理函数中,调用父组件传递的移除行函数,从数据源中移除对应的行,并更新选中行的状态。
- 更新数据源和选中行状态后,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 标签:const,树结构,移除,record,选中,key,ProTable,Protable From: https://www.cnblogs.com/wwssgg/p/18026675