在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([]); // 切换分页时取消之前的选择
    },
  }}
/>
``
antd rowSelection设置了selections TableSELECTION_ALL TableSELECTION_INVERT TableSELECTION_NONE全选所有后切换分页未选中数据

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

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