antd table 删除行
时间: 2023-09-04 12:12:16 浏览: 212
要删除 antd table 中的某一行,可以按照以下步骤操作:
1. 通过 `rowSelection` 属性设置行选择器,例如:
```
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys:', selectedRowKeys);
console.log('selectedRows:', selectedRows);
},
};
<Table rowSelection={rowSelection} dataSource={data} columns={columns} />;
```
2. 在 `onChange` 函数中处理选中的行,例如:
```
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys:', selectedRowKeys);
console.log('selectedRows:', selectedRows);
setSelectedRows(selectedRows);
},
};
```
这里通过 `setSelectedRows` 函数将选中的行保存到状态中。
3. 添加删除按钮,在按钮的 `onClick` 函数中删除选中的行,例如:
```
const handleDeleteRows = () => {
setData(data.filter(item => !selectedRows.includes(item)));
setSelectedRows([]);
};
<Button onClick={handleDeleteRows}>删除行</Button>;
```
这里通过 `setData` 函数更新数据源,`filter` 函数将选中的行过滤掉,`setSelectedRows` 函数清空选中的行。
阅读全文