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

相关推荐
阿部多瑞 ABU3 天前
《智能学号抽取系统》V5.9.5 发布:精简代码,修复移动端文件读取核心 Bug
vue·html·bug
qq_452396233 天前
【工程实战】第八篇:报告美学 —— Allure 深度定制:让 Bug 定位精准到秒
开发语言·python·bug
tkokof15 天前
捉虫(Bug)小记
人工智能·深度学习·bug·游戏开发
南宫萧幕5 天前
基于上一篇文章VMware+openweb UI+ollama+docker的bug问题总结
docker·容器·bug·openweb ui
呼啦啦5615 天前
测试(BUG篇)
bug
ZC跨境爬虫5 天前
3D地球卫星轨道可视化平台开发Day2(轨道错位Bug修复+模块化结构优化)
前端·3d·html·json·bug
柠檬07115 天前
记录bug :C++调用python 路径问题
c++·python·bug
初圣魔门首席弟子7 天前
bug20260415
c++·bug
万粉变现经纪人7 天前
如何解决 pip install flash-attention 报错 需要 SM_80+(Ampere)架构 问题
python·架构·django·bug·virtualenv·pip·pygame