在使用table時很多時候需要分頁，每次從后臺請求一定條數(shù)的數(shù)據(jù)，但是，有的業(yè)務(wù)中需要用到勾選。是不是會遇到勾選過第一頁以后，翻頁到第二頁的時候，第一頁的勾選被取消了呢。下面代碼可實現(xiàn)記憶勾選的功能（默認勾選的暫時有bug）
this.change(this.mobileDatas) //這個方法是在點擊分頁請求數(shù)據(jù)的時候調(diào)用，this.mobileDatas 這個是點擊分頁請求到的數(shù)據(jù)
//change是可以實現(xiàn)翻頁后再去上一頁，上一頁的會有已經(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 = []
// 獲取當前頁選中的id
x.forEach((row,index)=>{
selectIds.push(row.id);
// 如果總選擇里面不包含當前頁選中的數(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 = [];
// 得到當前頁沒有選中的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)
},
分頁的方法里要執(zhí)行以下上面方法，可以實現(xiàn)翻頁記憶
handleCurrentChange(val) {
this.page = val
this. handleChange()
this.changePageCoreRecordData (this.multipleSelection)
},
