在实际开发中,数据量大的表格基本都添加上了分页功能,每个页面请求的数据回交换更新,第一页的选中效果在跳转至第二页后,如果没有做相关处理,选中项会被清空,具体解决方法如下
1、在需要处理的表格标签中加上 :row-key="getRowKeys"以及@selection-change=“handleSelectionChange” 点击事件
2、在select选项列的中加上:reserve-selection=“true”
3、在data中添加
//选中的list
getRowKeys(row) {
//记录每行的key值
return row.id;
},
select_order_number: "", //表格select选中的条数
select_orderId: [], //表格select复选框选中的id
4、添加点击事件
//表格选中情况
handleSelectionChange(rows) {
this.multipleSelection = rows;
this.select_order_number = this.multipleSelection.length;
this.select_orderId = [];
if (rows) {
undefined;
rows.forEach((row) => {
undefined;
if (row) {
undefined;
this.select_orderId.push(row.id);
}
});
}
console.log(rows);
},
至此,即使来回切换页面,也无法清除上次选中情况。