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;
相关推荐
Dalydai14 小时前
AI 辅助大屏开发:怎么让 AI 干活,但别让它干砸
前端
凌涘14 小时前
深入理解 JavaScript 执行机制:从执行上下文到调用栈全解析
前端·javascript
utmhikari14 小时前
【AI原生】用Vibe Coding写产品前端原型的一些经验
前端·ai·产品经理·web·web开发·ai-native·qoder
li星野14 小时前
从零搭建文件上传系统:FastAPI 后端 + Streamlit 前端
前端·状态模式·fastapi
用户9385156350714 小时前
从模块化到 Prompt 工程:我用 Node.js + LLM 复刻了传统 NLP 的流程
javascript·人工智能·node.js
YAwu1114 小时前
手写一个符合 Promise/A+ 规范的 Promise(附完整代码)
前端·javascript
bonechips14 小时前
用 Prompt 做 NLP:从零搭建一个情感分析与信息提取系统
javascript
暗不需求14 小时前
从路虎汽车小程序看微信小程序开发的最佳实践
前端·javascript·微信小程序
用户0595401744614 小时前
我把RAG对话记忆测试从手工用例改成ChromaDB自动化评估,Bug发现率翻了4倍
前端·css
东风破_14 小时前
用原型实现一个队列:JS 面向对象的"不走寻常路"
javascript