方法一
官方也有基于這種操作給出通過屬性解決的方法:
<el-table :row-key="rowKey">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
methods: {
rowKey (row) {
return row.id
}
}
首先官網(wǎng)中對參數(shù)的描述是這樣的:
:row-key :行數(shù)據(jù)的 Key,用來優(yōu)化 Table 的渲染;在使用 reserve-selection 功能與顯示樹形數(shù)據(jù)時(shí),該屬性是必填的。類型為 String 時(shí),支持多層訪問:user.info.id,但不支持 user.info[0].id,此種情況請使用 Function。
:reserve-selection :僅對 type=selection 的列有效,類型為 Boolean,為 true 則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)(需指定 row-key),該屬性默認(rèn)值為false
知道這些了,同時(shí)你還需要toggleRowSelection和clearSelection兩個(gè)屬性。
toggleRowSelection:
參數(shù):row, selected
用于多選表格,切換某一行的選中狀態(tài),如果使用了第二個(gè)參數(shù),則是設(shè)置這一行選中與否(selected 為 true 則選中)
clearSelection:用于多選表格,清空用戶的選擇。
結(jié)合這四個(gè)屬性可以實(shí)現(xiàn)基本的表格選中,分頁打勾留存狀態(tài),但是對于一些非常規(guī)操作打勾卻不是很適用。
方法二:
我選用的方法分別是表格的兩個(gè)選中方法 select和select-all,toggleRowSelection方法,整體的邏輯
1.單選時(shí),判斷臨時(shí)存儲(chǔ)的數(shù)組是否為空,為空則直接push,不為空則判斷頁面中是否存在該數(shù)據(jù),存在則剪切掉代表取消打勾,不存在則push進(jìn)去。
2.全選時(shí),判斷參數(shù)val是否存在,存在即是代表全部選中,直接push到臨時(shí)數(shù)組,然后進(jìn)行數(shù)組去重即可,如果val為空,則是代表全取消,因?yàn)檫x中的是當(dāng)前頁面的數(shù)據(jù),所以直接從臨時(shí)數(shù)組中刪掉當(dāng)前分頁頁面的數(shù)據(jù)即可。
3.最后要做的就是在每次數(shù)據(jù)加載的時(shí)候 使用toggleRowSelection的方法,讓彈窗中的數(shù)據(jù)回顯
<el-table
ref="multipleGoodsList"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection"></el-table-column>
</el-table>
export default {
data() {
return {
goodsList: [], //彈窗中每次請求的頁面數(shù)據(jù)
selectedGoodsList:[]//臨時(shí)選中的數(shù)組
selectedGoods:[] //頁面中的表格
}
},
methods: {
//獲取彈窗內(nèi)的數(shù)據(jù)
getGoodsListFun() {
...
// 拿到數(shù)據(jù)后
// 當(dāng)再次打開
this.$nextTick(() => {
if (this.selectedGoodsList.length && this.selectedGoodsList.length > 0) {
this.goodsList.forEach(row => {
this.selectedGoodsList.forEach(p => {
if (row.id === p.id) {
this.$refs.multipleGoodsList.toggleRowSelection(row);
}
});
});
}
});
...
},
//單選
handleSelect(selection,row){
if(this.selectedGoodsList.length && this.selectedGoodsList.length >0){
let index
index = this.isSelectedGoods(row, this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(row);
}
}else{
this.selectedGoodsList.push(row)
}
},
//判斷是否存在的方法
isSelectedGoods(row, list) {
let rows = JSON.parse(JSON.stringify(row))
//是否選取 -1表示沒選中
return list.findIndex(item => {
return item.id == rows.id;
});
},
//全選
handleSelectAll(val){
//全選
if(val && val.length > 0){
val.forEach(row=>{
this.selectedGoodsList.push(row)
})
//數(shù)組去重
let newData = {};
this.selectedGoodsList = this.selectedGoodsList.reduce((preVal, curVal) => {
newData[curVal.id]? "": (newData[curVal.id] = true && preVal.push(curVal));
return preVal;
}, []);
}else{
//全不選 直接從數(shù)組中刪除當(dāng)頁的數(shù)據(jù)
for(let i = 0;i<this.goodsList.length;i++){
let index
index = this.isSelectedGoods(this.goodsList[i], this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(this.goodsList[i]);
}
}
}
},
//彈窗上的確定選擇按鈕
choiceGoodsFun() {
this.selectedGoods = JSON.parse(JSON.stringify(this.selectedGoodsList))
this.closeDialog();
},
//關(guān)閉彈窗
closeDialog(){
this.selectedGoodsList = [];
},
//打開彈窗
openDialog(){
this.selectedGoodsList = JSON.parse(JSON.stringify(this.selectedGoods));
}
}