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

相关推荐
Bear on Toilet8 小时前
3. BUG篇
bug
编程探索者小陈12 小时前
【测试】之BUG篇
bug
棋宣16 小时前
uni-app编译到微信小程序中,父传子props首次传递数据不接收的bug
微信小程序·uni-app·bug
wqdian_com17 小时前
华为手机浏览器的一个bug
服务器·华为·bug
清水白石0082 天前
把事故变成护城河:如何设计回归测试,防止“订单重复创建”这类历史 Bug 卷土重来?
python·bug
njsgcs2 天前
c# solidworks createline 拉伸发现有微小两点间隙 导致拉伸变成薄壁特征 改bug画了6个小时 解决结果
c#·bug·solidworks
前端达人2 天前
第18课:实战案例二,线上紧急 Bug 修复全过程
bug
代钦塔拉2 天前
Qt 按钮 Lambda 信号槽重复绑定、多次触发 BUG 深度剖析与终极解决方案
c++·qt·bug
lpfasd1233 天前
Win11笔记本睡眠唤醒致命bug:NUL设备丢失致Git等工具瘫痪
git·bug
隔窗听雨眠5 天前
Git二分法精准定位Bug
git·bug·git bisect