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

相关推荐
wow_DG2 天前
【Python✨】VS Code 秒开 Python 类型检查:一招 mypy + settings.json 让你的 Bug 原地现形!
python·json·bug
驱动探索者4 天前
Zephyr 获取 cpu 占用率异常bug分析
bug·rtos·zephyr
薛定e的猫咪5 天前
【调试技巧】vscode 四种断点调试,快速定位 bug
ide·vscode·python·bug
万粉变现经纪人5 天前
如何解决 pip install 编译报错 ‘cl.exe’ not found(缺少 VS C++ 工具集)问题
开发语言·c++·人工智能·python·pycharm·bug·pip
月小满6 天前
DataV轮播时其他组件的内容也一起滚动 修复bug的方法
前端·vue.js·bug·大屏端
桃子丫6 天前
AD转 Cadence学习指南-BUG篇
bug
testtraveler6 天前
[Fix] ImportError: libtorch_cpu.so: undefined symbol: iJIT_NotifyEvent
pytorch·python·bug
测试者家园6 天前
从“找 bug”到“降风险”:测试思维模式的底层迁移
软件测试·bug·风险管理·持续测试·测试基础·智能化测试·测试思维模式
chde2Wang7 天前
运行scala文件报错xsbt.CompilerInterface
bug·scala
离离茶8 天前
【笔记1-8】Qt bug记录:QListWidget窗口的浏览模式切换为ListMode后,滚轮滚动速度变慢
笔记·qt·bug