antd中如何实现分页勾选记住之前的选项

antd的表格中勾选状态的控制 的基本逻辑是通过表格属性的rowSelection的selectedRowKeys来实现的。它是一个数组。记录了所有勾选项的字段（常见的比如id）

  const rowSelection = {
    selectedRowKeys,
    onSelect: (record, selected, selectedRow) => {
     
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
     
    }
  }

<Table
    size="small"   
    hideSelectAll={true}
    rowSelection={rowSelection}
    columns={columns}
    dataSource={tableList}
    pagination={paginationProps}
>
</Table>

注意table里的rowSelection。他是表格行的属性集合。在它里面有几个比较重要的属性;

selectedRowKeys:记录了所有勾选的行的id集合

onSelect：勾选表格行时的回调

onSelectAll：勾选当前页的全选按钮时触发的回调

而核心就在selectedRowKeys。它是所有被勾选了的表格行的集合（通过表格行的id来表示）。只要我们在分页的时候能保证当前页的行id能在selectedRowKeys中那antd就会自动把当前行勾选上。所以不管分页多少页我们要记住所有勾选页的id的集合是我们要实现分页记住勾选状态的核心之一；而在rowSelection中我们能通过onSelect和onSelectAll实现对表格单独勾选和全选勾选操作的监听。那我们看看这两个函数里面有没有什么线索？

onSelect	用户手动选择/取消选择某行的回调	function(record, selected, selectedRows, nativeEvent)	-
onSelectAll	用户手动选择/取消选择所有行的回调	function(selected, selectedRows, changeRows)

根据antd的官方介绍。我们看到了这个。

onSelect: (record, selected, selectedRow) 

record;单独勾选某行时当前行的数据；

selected：当前行勾选的状态；勾选为true，取消为false

selectedRow：当前页的所有数据。比如切换到第二页。selectedRow就是第二页的数据

好家伙selectedRow这个来的很及时啊。我们试着写下面这波代码：

const [selectedRowKeys, setSelectedRowKeys] = useState([]) //表格数据

const rowSelection = {
    selectedRowKeys,
    onSelect: (record, selected, selectedRow) => {
      console.log("record:", record)
      let keys = [...selectedRowKeys]
      if (selected) {
        keys = [...selectedRowKeys, record.id]
      } else {
        keys = selectedRowKeys.filter((item) => item !== record.id)
      }
      setSelectedRowKeys(keys)
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      if (selected) {
        const addCheckedKeys = changeRows.map((item) => {
          return item.id
        })
        setSelectedRowKeys([...selectedRowKeys, ...addCheckedKeys])
      } else {
        const subCheckedKeys = selectedRowKeys.filter((id) => {
          return !changeRows.some((item) => {
            return item.id === id
          })
        })
        setSelectedRowKeys(subCheckedKeys)
      }
    }
  }

代码比较简单。到这一步。我们分页点击打印selectedRowKeys。发现我们已经成功的记录了所有勾选项的id了。

不是说只要我们在分页的时候能保证当前页的行id能在selectedRowKeys中那antd就会自动把当前行勾选上的吗？为啥还没勾选上了？

这时候我们还少了一步：

 rowKey={record => record.id}

我们看看antd官方的介绍

rowKey

表格行 key 的取值，可以是字符串或一个函数

string | function(record): string

key

没错。就是这玩意。

我们需要给表格每行加上这个rowkey，让它和我们数据里的某个字段绑定起来。这里我们通过id，因为selectedRowKeys我们记录的也是id。所以我们把table改造如下：

 <Table
                     
   rowKey={record => record.id}
   hideSelectAll={true}
   rowSelection={rowSelection}
   columns={columns}
   dataSource={tableList}
   pagination={paginationProps}
>
</Table>

注意第一行的 rowKey={record => record.id}。这时你会惊奇的发现。切换分页的时候之前页面勾选的行被自动勾选上了