在
antd 表格中开启
多选功能需要在 `columns` 中设置 `checkboxSelection: true`。同时，需要在 `Table` 组件中设置 `rowSelection` 属性来指定
选择的
行。
具体实现方式如下：
```jsx
import React, { useState } from 'react';
import { Table } from '
antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Action',
key: 'action',
render: () => <a>Delete</a>,
},
];
const MultiSelectTable = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onSelectChange = selectedRowKeys => {
setSelectedRowKeys(selectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<Table
dataSource={dataSource}
columns={columns}
rowSelection={rowSelection}
checkboxSelection
/>
);
};
export default MultiSelectTable;
```
上面的代码中，我们定义了一个 `MultiSelectTable` 组件，其中包含一个 `Table` 组件，设置了 `dataSource` 和 `columns`。在 `Table` 组件中，开启了
多选功能，同时指定了 `rowSelection` 属性来指定
选择的
行。我们还定义了一个 `selectedRowKeys`
状态，用于记录用户
选择的
行的 key 值，
并通过 `onSelectChange` 函数来更新该
状态。最后，将 `selectedRowKeys` 和 `onSelectChange` 传递给 `rowSelection` 属性，即可实现
多选功能。
本文探讨了在状态管理中定义初始值的方法，以及如何在选择过程中利用这些值进行实时更新。同时，深入解析了在删除操作中重置选择状态的策略。
扫一扫
2530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
