react antd表格翻页时记录勾选状态

在Ant Design的React表格(Table)组件中,如果需要在翻页时记住勾选状态,可以通过以下步骤实现:

  1. 使用rowSelection属性来控制勾选状态,并添加preserveSelectedRowKeys: true以保留 key。

  2. 设置rowKey属性。

javascript 复制代码
import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const rowSelection = {
    preserveSelectedRowKeys: true, // 分页切换保留上一页勾选的数据:2. 设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。
    selectedRowKeys,
    onChange: (newSelectedRowKeys, newSelectedRows) => {
      console.log('selectedRows changed: ', newSelectedRowKeys, newSelectedRows);
      setSelectedRowKeys(newSelectedRowKeys);
    },
  };

  return (
    <Table
      rowSelection={{
        ...rowSelection,
      }}
      rowKey={record => record.PAGEHELPER_ROW_ID}  // 分页切换保留上一页勾选的数据:1. 加上rowKey这个属性,值为row id
      ......
    />
  );
};

export default MyTable;
相关推荐
Y3815326627 分钟前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆
Apifox11 分钟前
Apifox 8 月更新|调试、权限与协作体验持续优化
前端·后端·测试
杉氧13 分钟前
React 灵魂:深入剖析 Hooks 与副作用(Side Effects)陷阱
android·前端·react native
Json____16 分钟前
java-宿舍安全卫生检查系统项目源码
java·前端·javascript·课程设计·it学习·wwwoop.com
lichenyang45328 分钟前
鸿蒙ArkUI 键盘避让终极踩坑指南:RESIZE 无效、Column 布局遮挡、折叠屏适配全解
前端
AbelTomato32 分钟前
博客评论系统搭建回顾
javascript·typescript·cloudflare·supabase·hyperdrive
梦醒沉醉34 分钟前
4、函数function
javascript
爱勇宝38 分钟前
公司没给活干,却因为员工看手机把人开了:法院判赔11万元
前端·后端·程序员
Patrick_Wilson39 分钟前
iOS Safari 按钮点击无响应问题修复指南
前端·ios·safari
Csvn1 小时前
模块化与工程化:CJS / ESM / 打包器,到底怎么协作?
前端