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

相关推荐
Qiuner4 小时前
历劫波,明真我——Debug Commune
ai·开源·bug·debug·信息差·信息·交流
川石课堂软件测试2 天前
什么是BUG,你对BUG的了解有多少?
android·linux·服务器·python·功能测试·bug·安全性测试
仰望星空的凡人2 天前
【BUG排查】基于RH850F1KMS1的主控出现系统中断错误,调试FEIC的值为0x11
单片机·bug·rh850·renesas
Vanranrr2 天前
Git Commit Message 最佳实践:从一次指针Bug说起
git·bug
初圣魔门首席弟子3 天前
c++ bug 函数定义和声明不一致导致出bug
开发语言·c++·bug
xuyuan19983 天前
修复1个Bug,引爆3个新Bug?回归测试的智慧
功能测试·测试用例·bug
三十_A3 天前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
BrightMZM3 天前
记录一下Unity的BUG,Trial Version
unity·bug·打包·trial
一只自律的鸡4 天前
【bug日记】python找不到包
bug
灵性花火4 天前
记录Qt的多个bug
qt·bug