解决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 Hook 'useEffect' is call
这篇文章主要为大家介绍了React Hook 'useEffect' is called in function报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了react 组件传值的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了React基于RBAC的权限控制,通过定义角色和权限、编写权限检查函数以及在路由、组件和选择控件中使用这些函数,可以灵活地控制应用中的访问权限,需要的朋友可以参考下2024-05-05
React路由组件传参的三种方式(params、search、state)
本文主要介绍了React路由组件传参的三种方式，主要包括了params、search、state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
这篇文章主要为大家介绍了React-three-fiber的使用初体验，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本文主要介绍了React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。感兴趣的小伙伴可以参考阅读2023-03-03
这篇文章主要为大家详细介绍了react实现动态选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论