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

相关推荐
残花月伴16 小时前
天机学堂——day1(修改bug)
servlet·bug
std860211 天前
微软 Win11 经典版 Outlook 曝 BUG,加速 SSD 损耗
microsoft·bug·outlook
花花鱼1 天前
android 网络访问拦截器使用后的bug处理
bug
JH30731 天前
MyBatis多表联查返回List仅一条数据?主键冲突BUG排查与解决
bug·mybatis
约翰先森不喝酒2 天前
Android BUG 之 资源文件报红但不影响运行
bug
百花~2 天前
认识BUG~
bug
ZHE|张恒2 天前
RDP 远程桌面连接:浏览器无法获取摄像头
bug
chde2Wang2 天前
Linux中bash: ls: 未找到命令… 相似命令是: ‘lz‘
linux·运维·bug·bash
阿里巴巴淘系技术团队官网博客2 天前
让AI打出丝滑连招:编码-部署-自测-改bug
人工智能·bug
lsswear2 天前
colinmollenhour/credis 1.17 bug
bug