先介绍一下表格的配置
需要添加checkbox-change事件
配置checkbox-config的reserve和checkRowKeys属性,checkRowKeys的值为selectionRows,用于盛放我们要选中的数据id
着重介绍一下selectChangeEvent事件
selectChangeEvent({ checked, records, reserves, row }) {
if (checked) {
//第一次选数据,还未进行翻页时
if (reserves.length == 0) {
//选中的行id数组
this.selectedRowKeys = records.map((v) => v.id);
//选中的行数据
this.selectionRows = records;
} else {
//id集合,翻页存在已选中的数据时,拼接新选中的数据
this.selectedRowKeys = [
...reserves.map((v) => v.id),
...records.map((v) => v.id),
];
//数据集合,翻页存在已选中的数据时,拼接新选中的数据
this.selectionRows = [...reserves, ...records];
}
console.log(this.selectionRows);
console.log(this.selectedRowKeys);
} else {
//取消选中时
let idIndex = this.selectedRowKeys.indexOf(row.id);
if (idIndex > -1) {
//删除取消选中删除指定元素id
this.$delete(this.selectedRowKeys, idIndex);
}
let dataIndex = null;
for (let i = 0; i < this.selectionRows.length; i++) {
if (this.selectionRows[i].id == row.id) {
dataIndex = i;
break;
}
}
//删除取消选中的元素整个对象
this.$delete(this.selectionRows, dataIndex);
console.log(this.selectionRows);
console.log(this.selectedRowKeys);
}
},
写到这里我们已经成功了一大部分了,但是还没达到我们想要的效果,最重要的是最后一步,就是在分页事件中给我们已经选中的数据添加选中状态
//selectList为已经选中的数据
this.selectList.forEach((item) => {
//tableData为表格数据
this.tableData.forEach((it) => {
if (item.id == it.id) {
//翻页选中逻辑
this.$refs.table.setCheckboxRow(it, true);
console.log(item);
}
});
});
上面的方法写到翻页的查询逻辑中
这样我们就实现了vxeTable表格翻页后记忆选中行功能了