Ant Design Table 全选后切换分页,未选中数据问题及解决方法
在 Ant Design 的 Table 组件中,使用 rowSelection 属性设置 selections 选项是为了提供更多选择功能。当你设置了 selections 选项为 [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE] 时,会在 Table 的头部添加一个下拉菜单,用于选择全选、反选和取消选择的操作。
然而,当你全选所有数据后切换分页时,未选中数据是正常的行为。这是因为分页是通过改变当前页码来展示不同的数据,而不会影响已选中的数据。所以当你切换分页时,之前选中的数据仍然会被选中,而未选中的数据仍然不会被选中。
如果你希望在切换分页时取消之前的选择,可以监听 Table 组件的 pagination 属性的 onChange 事件,在该事件中重置 rowSelection 的 selectedRowKeys 属性为空数组,即可取消所有选择:
<Table
rowSelection={{
type: 'checkbox',
selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],
selectedRowKeys: selectedRowKeys, // 通过 state 管理选中的行
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
},
}}
dataSource={dataSource}
columns={columns}
pagination={{
onChange: (page, pageSize) => {
setSelectedRowKeys([]); // 切换分页时取消之前的选择
},
}}
/>
原文地址: https://www.cveoy.top/t/topic/p15c 著作权归作者所有。请勿转载和采集!