问题
因为点击切换表格页之后. 表格多选单选的内容会被清空. 第一次做也没有什么好的解决方法, 在网上看了很多方法觉得比较复杂.于是自己开始动手实现这个功能呢.
思路
1.首先将每次勾选的数据缓存到本地;
2.其次因为数据是分页查询出来的. 所以加载页面完成之后默认查询的是第一页的数据. 当表格切换到下一页之后 或者返回到了上一页, 也知道是查询的那一页数据. 监听查询回来的数据.当数据发生变化之后 去遍历查询回来的数据 以及本地缓存的数据. 找到相同的数据勾选上;
tableSelctRow(selection, row) {
this.$set(this.rowSelectionPage, this.query.pageIndex, selection);
},
tableSelectAll(selection) {
this.$set(this.rowSelectionPage, this.query.pageIndex, selection);
},
tableSelectChange(selection) {
his.$set(this.rowSelectionPage, this.query.pageIndex, selection);
}
watch: {
list() {
const pageIndex = this.query.pageIndex;
//遍历 this.list 遍历 this.rowSelectionPage[pageIndex] 如若有相同的id 则选中
this.list.forEach(item => {
if (this.rowSelectionPage[pageIndex]) {
this.rowSelectionPage[pageIndex].forEach(item2 => {
if (item.id == item2.id) {
item['_checked'] = true;
}
})
}
})
}
},