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

前言

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

rowSelection属性属性值如下

问题

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

解决方法

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

react 复制代码
<Table
              columns={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,否则在进行选择、或者实现默认选择时会出现离奇现象,总是到不到想要的效果

相关推荐
秃头小饼干17 分钟前
技术文章大纲:Bug悬案侦破大会
bug
hui函数20 小时前
Python系列Bug修复PyCharm控制台pip install报错:如何解决 pip install 网络报错 企业网关拦截 User-Agent 问题
python·pycharm·bug
hui函数20 小时前
如何解决 pip install 代理报错 SOCKS5 握手失败 ReadTimeoutError 问题
bug·pip
f***24111 天前
Bug悬案:程序员破案实录
bug
一条咸鱼_SaltyFish2 天前
[Day10] contract-management初期开发避坑指南:合同模块 DDD 架构规划的教训与调整
开发语言·经验分享·微服务·架构·bug·开源软件·ai编程
雒珣2 天前
qt界面和图片疯狂变大的bug问题
开发语言·qt·bug
天才测试猿2 天前
软件测试之bug分析定位技巧
软件测试·python·selenium·测试工具·职场和发展·测试用例·bug
zhz52143 天前
后端代码规范文档示例
重构·bug·代码规范·结对编程
luming-023 天前
java报错解决:sun.net.utils不存
java·经验分享·bug·.net·intellij-idea
星月心城3 天前
Element Plus 2.7.5 的 datetimerange 存在 is-disabled 误判 Bug(头部年份 / 月份被错误禁用)
bug