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;
相关推荐
顾北123 分钟前
AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接
前端·人工智能
iDao技术魔方16 分钟前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
javascript·vue.js·ecmascript
历程里程碑20 分钟前
普通数组-----除了自身以外数组的乘积
大数据·javascript·python·算法·elasticsearch·搜索引擎·flask
摸鱼的春哥21 分钟前
春哥的Agent通关秘籍07:5分钟实现文件归类助手【实战】
前端·javascript·后端
念念不忘 必有回响24 分钟前
viepress:vue组件展示和源码功能
前端·javascript·vue.js
Amumu1213827 分钟前
Vue3 Composition API(一)
开发语言·javascript·ecmascript
C澒29 分钟前
多场景多角色前端架构方案:基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅31 分钟前
稳定好用的 ADSL 拨号代理,就这家了!
前端
江湖有缘32 分钟前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
hzb6666634 分钟前
unictf2026
开发语言·javascript·安全·web安全·php