Antd Table rowSelection切换导致选中的数据丢失

最新推荐文章于 2024-08-14 10:04:16 发布

CahierX

最新推荐文章于 2024-08-14 10:04:16 发布

阅读量2.6k

点赞数 7

分类专栏： js

本文链接：https://blog.csdn.net/qq_35493664/article/details/118992191

版权

js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

官网例子没有这个问题是因为它的 table 数据是一次通过接口拉下来的，后续分页不在请求接口，而实际情况是需要点击一次分页拉一次数据就导致 table 重新渲染导致selectedRowKeys数据丢失。
解决方案：
preserveSelectedRowKeys 当数据被删除时仍然保留选项的 key boolean - 4.4.0
当使用 rowSelection 时，请设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。

  const rowSelection = {
    selectedRowKeys: selectedRowKeys,
    preserveSelectedRowKeys: true, // 加上这行即可
    onChange: (selectedKeys: React.Key[], selectedRows: IDevice[]) => {
      setSelectedRowKeys(selectedKeys);
    },
  };