在使用table時(shí)很多時(shí)候需要分頁(yè)，每次從后臺(tái)請(qǐng)求一定條數(shù)的數(shù)據(jù)蜈漓，但是，有的業(yè)務(wù)中需要用到勾選宫盔。是不是會(huì)遇到勾選過(guò)第一頁(yè)以后融虽，翻頁(yè)到第二頁(yè)的時(shí)候，第一頁(yè)的勾選被取消了呢灼芭。下面代碼可實(shí)現(xiàn)記憶勾選的功能（默認(rèn)勾選的暫時(shí)有bug）
this.change(this.mobileDatas) //這個(gè)方法是在點(diǎn)擊分頁(yè)請(qǐng)求數(shù)據(jù)的時(shí)候調(diào)用有额，this.mobileDatas 這個(gè)是點(diǎn)擊分頁(yè)請(qǐng)求到的數(shù)據(jù)
//change是可以實(shí)現(xiàn)翻頁(yè)后再去上一頁(yè)，上一頁(yè)的會(huì)有已經(jīng)有的勾選狀態(tài)
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 = []
// 獲取當(dāng)前頁(yè)選中的id
x.forEach((row,index)=>{
selectIds.push(row.id);
// 如果總選擇里面不包含當(dāng)前頁(yè)選中的數(shù)據(jù)彼绷，那么就加入到總選擇集合里
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 = [];
// 得到當(dāng)前頁(yè)沒(méi)有選中的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)
},
分頁(yè)的方法里要執(zhí)行以下上面方法寄悯，可以實(shí)現(xiàn)翻頁(yè)記憶
handleCurrentChange(val) {
this.page = val
this. handleChange()
this.changePageCoreRecordData (this.multipleSelection)
},
