antd的Table组件使用rowSelection属性实现多选时遇到的bug

前言

前端样式框架采用AntDesign时,经常会使用到Table组件,如果要有实现多选或选择的需求时往往就会用到rowSelection属性,效果如下
在这里插入图片描述

rowSelection属性属性值如下

在这里插入图片描述

问题

文档中并没有说明选择时以数据中的哪个属性为准,看官方案例是默认以名为key的属性为准,那如果我们项目要展示的数据没有key,而想要以数据中的id为准,该如何设置?
在这里插入图片描述

解决方法

在Table组件中明确指出rowkey是什么,如下以react为例:

<Tablecolumns={comAnounceH}dataSource={commonNewsData}pagination={{total: pageCount,pageSize: 5}}rowSelection={{selectedRowKeys: this.state.selectedRowKeys,onSelect: (record, selected, selectedRows, nativeEvent) => {this.updateSelectData(selected, Array(1).fill(record))},onSelectAll: (selected, selectedRows, changeRows) => {this.updateSelectData(selected, changeRows)},}}rowKey= {record => record.id}/>

关键代码rowKey= {record => record.id},指明rowKey为数据中的id,否则在进行选择、或者实现默认选择时会出现离奇现象,总是到不到想要的效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/159768.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaWeb | JavaWeb开发环境相关知识点

JavaWeb开发环境相关知识点: 1.C/S结构、B/S结构2.浏览器与服务器的交互模式3.Tomcat安装目录中&#xff0c;比较重要的文件夹/文件4.怎么修改Tomcat端口&#xff1f;5.URL /url / 统一资源定位符 1.C/S结构、B/S结构 网络应用程序中&#xff0c;有 两种基本结构&#xff1a; C…

newstarctf2022week2

Word-For-You(2 Gen) 和week1 的界面一样不过当时我写题的时候出了个小插曲 连接 MySQL 失败: Access denied for user rootlocalhost 这句话印在了背景&#xff0c;后来再进就没了&#xff0c;我猜测是报错注入 想办法传参 可以看到一个name2,试着传参 发现有回显三个字段…

防止重复提交请求

前景提要&#xff1a; ts 简易封装 axios&#xff0c;统一 API 实现在 config 中配置开关拦截器 axios 实现请求 loading 效果 用一个数组保存当前请求的 url&#xff0c;此时还未响应。如果再次发起同样请求&#xff0c;比对 url 发现已经存在数组中&#xff0c;则拦截请求&a…

EasyExcel复杂表头数据导入

目录 表头示例导入代码数据导出 表头示例 导入代码 Overridepublic void importExcel(InputStream inputStream) {ItemExcelListener itemExcelListener new ItemExcelListener();EasyExcel.read(inputStream, ImportItem.class, itemExcelListener).headRowNumber(2).sheet()…

【1++的Linux】之线程(一)

&#x1f44d;作者主页&#xff1a;进击的1 &#x1f929; 专栏链接&#xff1a;【1的Linux】 文章目录 一&#xff0c;Linux线程概念二&#xff0c;线程的优缺点进程和线程类比现实 三&#xff0c; 线程的操作线程的私有资源 && 线程的创建线程的等待线程终止线程分离…

【Spring MVC】传递参数

前言&#xff1a; 访问不同路径就是在发送不同的请求&#xff0c;在发送请求时&#xff0c;可能会带有一些参数&#xff0c;所以Spring的请求主要是为了学习如何传递参数到后端以及后端如何接收。 在SpringMVC中使用RequestMapping来实现路由映射&#xff0c;也就是浏览器连接…

JMeter:断言之响应断言

一、断言的定义 断言用于验证取样器请求或对应的响应数据是否返回了期望的结果。可以是看成验证测试是否预期的方法。 对于接口测试来说&#xff0c;就是测试Request/Response&#xff0c;断言即可以针对Request进行&#xff0c;也可以针对Response进行。但大部分是对Respons…

[开源]企业级在线办公系统,基于实时音视频完成在线视频会议功能

一、开源项目简介 企业级在线办公系统 本项目使用了SpringBootMybatisSpringMVC框架&#xff0c;技术功能点应用了WebSocket、Redis、Activiti7工作流引擎&#xff0c; 基于TRTC腾讯实时音视频完成在线视频会议功能。 二、开源协议 使用GPL-3.0开源协议 三、界面展示 部分…

SpringBoot-SpringCache缓存

文章目录 Spring Cache 介绍常用注解 Spring Cache 介绍 Spring Cache 是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。 Spring Cache 提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;…

Docker网络模式_Docker常用命令_以及Docker如何给运行的镜像内容连接互联网_Docker网络模式原理---Docker工作笔记004

然后我们来看一下docker的网络模式: 这个docker我们先看一下电脑上的网络,有两个,1个是lo是测试用的一个是enp0s3这个是我们以太网地址,然后我们去: 安装docker 安装后我们再去ip address可以看到多出来一个网络是docker0 这里ip地址是172.17.0.1这个是私有地址外部无法访问 这…

信号完整性分析基础知识之有损传输线、上升时间衰减和材料特性(九):互连的带宽

如果我们从理想方波的频谱开始&#xff0c;优先衰减高频分量而不是低频分量&#xff0c;则传输信号的带宽&#xff08;重要的最高正弦波频率&#xff09;将会减小。我们让波传播的时间越长&#xff0c;高频分量的衰减就越大&#xff0c;带宽就越低。 带宽作为重要的最高正弦波频…

https网站加载http资源问题

https网站加载http资源问题 前言&#xff1a;最近项目对接了一个第三方的平台、我们需要展示第三方平台返回来的图片资源、由于我们的服务器设置为了https、但是第三方平台返回的图片链接是 http 资源。所以就出现了图片无法加载出来的问题&#xff0c;在此记录一下问题的解决…