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

总结

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

来源链接:https://www.jb51.net/javascript/325924wac.htm

© 版权声明
THE END
支持一下吧
点赞10 分享
评论 抢沙发
头像
请文明发言!
提交
头像

昵称

取消
昵称表情代码快捷回复

    暂无评论内容