项目背景:antd 1.0版 + vue2
使用a-table标签需要多选数据的情况下,前端一般通过selectedRowKeys向后台传输所有选中的数据的唯一id组成的数组即可。
但是,在特殊情况下,后台需要前端同时传输所选数据的其他一些字段,数据类型是数组对象,那么就不能依赖selectedRowKeys来实现了。
一开始,我考虑到row-selection中的onChange函数会返回selectedRows,尝试使用。但是,在后台分页的情况下,当跨页选择的时候,selectedRows不会反映其它页的数据选择情况,只会反映当前页的数据选择情况。
然后,我看了官方文档,也考虑了一些搭配其他函数的实现方法,但是感觉太麻烦了。
所以最终,还是回去叮onChange函数。
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
思路如下:
如果跨页选择数据,selectedRows只会返回本页所选数据,但是selectedRowKeys会返回所有页选中的数据的id(或者是其它唯一值,与rowKey有关)。
那么可以将所有发生选中行为的数据保存在一个数组里。
但是,也不能每次发生选中行为就将数据保存进数组,毕竟不可避免用户选中数据之后取消选中再选中的行为,为了确保数据唯一性(毕竟对象数组去重也挺烦的),将不存在于数组中的数据存入数组。
但是,这个数组无法体现取消选中的行为,所以最后需要利用selectedRowKeys来对数组进行筛选,得到所有页选中的数据。
代码如下:
onSelectChange(selectedRowKeys, selectedRows) {
for (let val of selectedRows) {
if (!this.selectedRows.find((item) => item.id === val.id)) {
this.selectedRows.push(val);
}
}
this.selectedRowKeys = selectedRowKeys;
this.selectedRows = this.selectedRows.filter((item) =>
this.selectedRowKeys.includes(item.id)
);
},