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;
相关推荐
weixin_471383033 小时前
React Flow + Zustand 搭建工作流编排工作台
前端·react.js·前端框架
kilito_013 小时前
react疑难讲解
前端·react.js·前端框架
字节跳动的猫3 小时前
2026 四款 AI:开发场景适配全面解析
前端·人工智能·开源
gyx_这个杀手不太冷静3 小时前
大人工智能时代下前端界面全新开发模式的思考(四)
前端·架构·ai编程
Ruihong4 小时前
你的 Vue 3 useAttrs(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
时寒的笔记4 小时前
js逆向_webpack讲解加载器&酷某音乐案例
开发语言·javascript·webpack
李剑一4 小时前
我做了个微信聊天模拟器,已开源
前端
yusirxiaer4 小时前
为什么 markRaw 能修复 Vue 3 + ECharts 的 resize 报错
javascript·vue.js·echarts
代码搬运媛4 小时前
30分钟带你从0手搓一个AI-Cli命令行工具
前端
赛博切图仔4 小时前
前端性能内卷终点?Signals 正在重塑我们的开发习惯
前端·javascript·vue.js