需求：
1.表格多選
2.支持翻頁
3.支持當(dāng)前頁全選
效果如下：
IMG.jpeg
思路：
1.將每頁全部選中的數(shù)據(jù)存放到一個數(shù)組中
2.將當(dāng)前頁碼選中的數(shù)據(jù)存到一個數(shù)組中
3.獲取一個鍵值彼宠，標(biāo)識當(dāng)前行的唯一鍵的名稱
實(shí)現(xiàn)：
1.初始化數(shù)據(jù)
driver_id:[],
multipleSelectionAll:[],//所有選中的數(shù)據(jù)包含跨頁數(shù)據(jù)
multipleSelection:[],// 當(dāng)前頁選中的數(shù)據(jù)
idKey: 'driver_id', // 標(biāo)識列表數(shù)據(jù)中每一行的唯一鍵的名稱
2.復(fù)選框改變時的事件
//復(fù)選框
handleSelectionChange(val){
let driver_ids =[];
val.map(item =>{
driver_ids.push(item.driver_id);
})
this.form.sels = driver_ids.join(',');
this.driver_id = driver_ids
this.multipleSelection = val;
this.multipleSelectionAll = Array.from(new Set(this.multipleSelectionAll.concat(driver_ids))); // 去重
//實(shí)時記錄選中的數(shù)據(jù)
setTimeout(()=>{
this.changePageCoreRecordData();
}, 50)
},
3.翻頁記憶核心部分：
// 記憶選擇核心方法
changePageCoreRecordData () {
// 標(biāo)識當(dāng)前行的唯一鍵的名稱
let idKey = this.idKey;
let that = this;
// 如果總記憶中還沒有選擇的數(shù)據(jù)逼裆，那么就直接取當(dāng)前頁選中的數(shù)據(jù)，不需要后面一系列計(jì)算
if (this.multipleSelectionAll.length < 0) {
this.multipleSelectionAll = this.multipleSelection;
return;
}
// 總選擇里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach((row,index)=>{
selectAllIds.push(row[idKey]);
})
let selectIds = []
// 獲取當(dāng)前頁選中的id
this.multipleSelection.forEach(row=>{
selectIds.push(row[idKey]);
// 如果總選擇里面不包含當(dāng)前頁選中的數(shù)據(jù)俱病，那么就加入到總選擇集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
})
let noSelectIds = [];
// 得到當(dāng)前頁沒有選中的id
this.tableData.forEach(row=>{
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
})
noSelectIds.forEach(id=>{
if (selectAllIds.indexOf(id) >= 0) {
for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
if (that.multipleSelectionAll[i][idKey] == id) {
// 如果總選擇中有未被選中的，那么就刪除這條
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
let driver_id =[];
this.multipleSelectionAll.map(item => {
driver_id.push(item.driver_id);
})
this.form.sels = driver_id.join(',');
if(this.multipleSelectionAll.length > this.total) {
let ID = this.multipleSelectionAll[this.multipleSelectionAll.length - 1].driver_id
this.tableData.forEach(row=>{
if(row.driver_id == ID) {
this.$refs.multipleTable.toggleRowSelection(row); //實(shí)現(xiàn)打鉤
}
})
}
},
4.請求翻頁重新取得數(shù)據(jù)時再次勾選上記憶中的選項(xiàng)
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length < 0) {
return;
}
// 標(biāo)識當(dāng)前行的唯一鍵的名稱
let idKey = this.idKey;
let that = this;
if(this.selectAllIds!=null){
this.$refs.multipleTable.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (this.selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 設(shè)置選中袱结，記住table組件需要使用ref="multipleTable"
this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
}
}
}
},
前端小白一枚亮隙，希望能夠幫到你，歡迎留言評論垢夹！
喜歡的點(diǎn)贊和關(guān)注哦Ｒ缥恰！
