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;
相关推荐
江畔柳前堤13 分钟前
字节跳动·大模型应用知识手册
前端·人工智能·深度学习·opencv·目标检测·重构·transformer
LEE1 小时前
前端转型全栈 03:接口失败也返回 200,OpenAPI 契约与错误码怎么定
前端·后端·全栈
我命由我123451 小时前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
lichenyang4532 小时前
让 VK 小程序调用 HarmonyOS 原生能力:一次跨端 Bridge SDK 的设计与实践
前端
阳光宅男@李光熠2 小时前
【电子通识】一起学习TDK的EMC基础——电池兼容设计方法概述
java·前端·数据库
南雨北斗3 小时前
vue3项目中的env.d.ts文件
前端
烈风逍遥3 小时前
第五篇:通用 LLM 流式对话:前后端联接的完整实现
前端·后端·架构
aixingpan3 小时前
aixingpan.cn API开发文档:api_docs_trichart_natal_progression_sec_transit2接口指南
前端·php
江华森3 小时前
Web 安全实战:验证机制、会话管理、SQL 注入、XSS 与 CSRF
前端
江华森3 小时前
HTTPS 实战:TLS 握手成本、自制 CA 与证书、三大常见故障
前端