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

相关推荐
Groundwork Explorer9 小时前
wiznet5k.py硬件驱动w5500芯片网卡bug
bug
欧恩意10 小时前
【BUG】Bindiff中文乱码问题
bug
系统修复专家10 小时前
UG12.0官方未公开修复方法:彻底解决C++异常崩溃问题
开发语言·c++·安全·bug·dll·游戏报错
洛_尘2 天前
测试3:BUG篇
bug
蓝帆傲亦3 天前
Web前端常见Bug及排查处理方案
前端·bug
宁宁Fingerstyle3 天前
CryptoJS.AES “Malformed UTF-8 data” Bug 排查
前端·javascript·typescript·bug
奶茶精Gaaa4 天前
测试能力提升--Bug分析能力
bug
LJianK15 天前
idea自带的数据库修改默认值有bug
bug
这个软件需要设计一下7 天前
ninedata安装磁盘不足问题解决
运维·bug
热爱生活的五柒7 天前
cc-switch安装方法、介绍及遇到的bug
bug·cc-switch