解决antd的Table组件使用rowSelection属性实现多选时遇到的bug

更新时间：2024年08月14日 15:21:40 作者：JavaWizard-M

这篇文章主要介绍了解决antd的Table组件使用rowSelection属性实现多选时遇到的bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

前端样式框架采用AntDesign时，经常会使用到Table组件，

如果要有实现多选或选择的需求时往往就会用到rowSelection属性

效果如下：

rowSelection属性属性值如下：

问题

文档中并没有说明选择时以数据中的哪个属性为准

看官方案例是默认以名为key的属性为准

那如果我们项目要展示的数据没有key

而想要以数据中的id为准，该如何设置？

解决方法

在Table组件中明确指出rowkey是什么

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

react使用echart绘制地图的案例
这篇文章主要介绍了react使用echart绘制地图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
React memo允许你的组件在 props 没有改变的情况下跳过重新渲染的问题记录
使用 memo 将组件包装起来,以获得该组件的一个记忆化版本,只要该组件的 props 没有改变,这个记忆化版本就不会在其父组件重新渲染时重新渲染,这篇文章主要介绍了React memo允许你的组件在 props 没有改变的情况下跳过重新渲染,需要的朋友可以参考下
2024-06-06
React文件分段上传实现方法详解
这篇文章主要介绍了React文件分段上传实现方法，将文件切成多个小的文件；将切片并行上传；所有切片上传完成后，服务器端进行切片合成；当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分实现断点续传；当切片合成为完整的文件，通知客户端上传成功
2022-11-11
React中组件的this.state和setState的区别
在React开发中,this.state用于初始化和读取组件状态,而setState()用于安全地更新状态,正确使用这两者对于管理React组件状态至关重要,避免性能问题和常见错误
2024-09-09
如何在React项目中引入字体文件并使用详解
我们项目中通常会需要引入字体,所以下面这篇文章主要给大家介绍了关于如何在React项目中引入字体文件并使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-08-08
图文示例讲解useState与useReducer性能区别
这篇文章主要为大家介绍了useState与useReducer性能区别图文示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React利用lazy+Suspense实现路由懒加载
这篇文章主要为大家详细介绍了React如何利用lazy+Suspense实现路由懒加载，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下
2023-06-06
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下
2023-01-01
React封装自定义Hook捕获所有错误的实现方法
在 React 开发中,错误处理是确保应用稳定性和用户体验的重要部分,React 提供了多种错误捕获方式,包括错误边界**等,本文将详细介绍这些方法,并展示如何封装一个能够捕获所有同步和异步错误的自定义 Hook,需要的朋友可以参考下
2024-12-12
详解React Angular Vue三大前端技术
当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。
2021-05-05