介绍
今天我们继续学习Ant Design的Table组件，今天的主题是如何为Table组件添加行选中功能，也就是用户可以通过点击某一行来选中它，这在很多场景下都非常有用，比如批量操作、查看详情等。关于如何选中行，我们可以使用Table组件提供的rowSelection属性来实现，关于rowSelection的具体用法，可以参考这里：https://ant-design.antgroup.com/components/table-cn#rowselection
实现行选中功能
下面是一个简单的示例，展示了如何在Table组件中实现行选中功能，首先为Table组件添加rowSelection属性，然后在这个属性中定义选中行的逻辑。
1
2
3
4
5
6
| <Table
dataSource={tableData}
columns={columns}
rowKey={'id'}
rowSelection={rowSelection}
/>
|
接下来我们来定义rowSelection的具体内容，我们在rowSelection中可以定义一些回调函数，比如当选中行发生变化时，我们可以通过onChange回调来获取当前选中的行数据。
1
2
3
4
5
6
| const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
console.log('selectedRows changed: ', selectedRows);
},
};
|
运行程序，选中第一行和第二行，控制台会输出选中的key和行数据，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| selectedRowKeys: 1,2
selectedRows: [
{
"id": 1,
"name": "User1",
"email": "user1@gmail.com",
"phone": "13028296158"
},
{
"id": 2,
"name": "User2",
"email": "user2@gmail.com",
"phone": "13084774670"
}
]
|
因为默认的rowKey是id，所以selectedRowKeys就是选中行的id：分别是1和2。如果我们在Table组件中设置了rowKey为name
1
2
3
4
5
6
| <Table
dataSource={tableData}
columns={columns}
rowKey={'name'}
rowSelection={rowSelection}
/>
|
那么selectedRowKeys就会变成选中行的name。
1
| selectedRowKeys: User1,User2
|
接下来是selectedRows，它是一个数组，包含了所有选中行的数据。我们可以在onChange回调中获取到这些数据，并进行相应的处理，比如批量删除、批量编辑等。
批量操作
以批量删除为例，我们可以将选中的行数据的id提取出来，然后通过一个删除函数来删除这些数据。
先定义一个state变量来存储选中的行数据的id：
1
| const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
当用户选中某些行时，我们记录下这些行的id：
1
2
3
4
5
6
| const rowSelection = {
selectedRowKeys,
onChange: (newSelectedRowKeys, selectedRows) => {
setSelectedRowKeys(newSelectedRowKeys);
}
};
|
最后，当用户点击批量删除按钮时，将这些id传给批量删除函数：
1
2
3
4
5
6
7
8
| const handleBatchDelete = () => {
deleteUsers(selectedRowKeys).then(() => {
setSelectedRowKeys([]);
fetchData();
});
}
|
为什么选中一行，所有行都会被选中？
有时候我们会遇到一个问题，就是当我们选中某一行时，所有行都会被选中。这通常是因为我们没有在
组件中正确设置rowKey属性。rowKey属性用于指定每一行数据的唯一标识符，当我们使用选中功能时，Ant Design会根据这个唯一标识符来判断哪些行是被选中的。我们只要在Table组件中正确设置rowKey属性，就可以避免这个问题。
1
2
3
4
5
6
| <Table
dataSource={tableData}
columns={columns}
rowKey={'id'}
rowSelection={rowSelection}
/>
|
为什么选中了一行，其他行的Checkbox也会被选中？
如果你已经正确设置了rowKey属性，但仍然遇到选中一行时其他行的Checkbox也被选中的问题，这是因为rowKey指定的属性有重复值，比如你设置了rowKey={'id'}，但数据中有多行的id是相同的，也会导致重复选中的问题。只要确保每一行数据的rowKey属性是唯一的，就可以避免这个问题。
禁止选中某些行
有些时候，我们可能要禁止用户选中某些行，比如某些用户是管理员或者某些状态的用户不允许被选中。我们可以在rowSelection中添加一个getCheckboxProps函数来实现这个功能。
比如，我们想让name为”User1”的行不能被选中，可以这样实现：
1
2
3
4
5
| const rowSelection = {
getCheckboxProps: (record) => ({
disabled: record.name === 'User1',
}),
};
|
这样，name为”User1”的行就会被禁用，用户无法选中它。
自定义选中列的名字
有时候，我们需要给选中列自定义一个名字，比如”选择”，此时可以通过rowSelection的columnTitle属性来实现：
1
2
3
| const rowSelection = {
columnTitle: '选择',
};
|
默认情况下，选中列的宽度就是Checkbox的宽度，这会导致该列的标题竖起来，所以我们还需要为这一列设置宽度：
1
2
3
4
| const rowSelection = {
columnTitle: '选择',
columnWidth: '50px',
};
|
好了，以上就是今天的内容了，祝大家编程愉快，我们明天再见！