在使用table时很多时候需要分页,每次从后台请求一定条数的数据,但是,有的业务中需要用到勾选。是不是会遇到勾选过第一页以后,翻页到第二页的时候,第一页的勾选被取消了呢。下面代码可实现记忆勾选的功能(默认勾选的暂时有bug)
this.change(this.mobileDatas) //这个方法是在点击分页请求数据的时候调用,this.mobileDatas 这个是点击分页请求到的数据
//change是可以实现翻页后再去上一页,上一页的会有已经有的勾选状态
change(data){
for(let i = 0;i<data.length;i++){
for(let x = 0;x<this.multipleSelectionAll.length;x++){
if(data[i].id == this.multipleSelectionAll[x].id ){
var c = i
var f = function(a){
setTimeout(() => {
vm.$refs.multipleTable.toggleRowSelection(data[a],true);
}, 1*a);
}
f(c)
}
}
}
},
在table的@selection-change="handleSelectionChange"中
handleSelectionChange(val) {
this.multipleSelection = val
this.changePageCoreRecordData (this.multipleSelection)
},
changePageCoreRecordData (x) {
// 总选择里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach((row,index)=>{
selectAllIds.push(row.id);
})
let selectIds = []
// 获取当前页选中的id
x.forEach((row,index)=>{
selectIds.push(row.id);
// 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
if (selectAllIds.indexOf(row.id) < 0) {
this.multipleSelectionAll.push(row);
}else{
for(let i = 0; i< x.length; i ++) {
if (this.multipleSelectionAll[i].id == row.id) {
// 如果总选择中有未被选中的,那么就删除这条
this.multipleSelectionAll.splice(i, 1,x[i]);
break;
}
}
}
})
let noSelectIds = [];
// 得到当前页没有选中的id
x.forEach(row=>{
if (selectIds.indexOf(row.id) < 0) {
noSelectIds.push(row.id);
}
})
noSelectIds.forEach(id=>{
if (selectAllIds.indexOf(id) >= 0) {
for(let i = 0; i< this.multipleSelectionAll.length; i ++) {
if (this.multipleSelectionAll[i].id == id) {
// 如果总选择中有未被选中的,那么就删除这条
this.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
console.log(this.multipleSelectionAll)
},
分页的方法里要执行以下上面方法,可以实现翻页记忆
handleCurrentChange(val) {
this.page = val
this. handleChange()
this.changePageCoreRecordData (this.multipleSelection)
},
网友评论