在 Ant Design 的 Table 组件中,使用 rowSelection 属性设置 selections 选项是为了提供更多选择功能。当你设置了 selections 选项为 [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE] 时,会在 Table 的头部添加一个下拉菜单,用于选择全选、反选和取消选择的操作。

然而,当你全选所有数据后切换分页时,未选中数据是正常的行为。这是因为分页是通过改变当前页码来展示不同的数据,而不会影响已选中的数据。所以当你切换分页时,之前选中的数据仍然会被选中,而未选中的数据仍然不会被选中。

如果你希望在切换分页时取消之前的选择,可以监听 Table 组件的 pagination 属性的 onChange 事件,在该事件中重置 rowSelectionselectedRowKeys 属性为空数组,即可取消所有选择:

<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([]); // 切换分页时取消之前的选择
    },
  }}
/>
Ant Design Table 全选后切换分页,未选中数据问题及解决方法

原文地址: https://www.cveoy.top/t/topic/p15c 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录