# 需求:
多選框表格數據在翻頁時,顯示當前頁選中的項
第一頁選中3條,切換到第二頁再選中2條數據,當再次切換回第一頁時,將本頁當前選中的項勾選上.
# 大概思路
1. questions: [] 分頁時從后臺獲取的本頁面數據
2. multipleSelection: [] 當前頁選中的項
3. allSelecteds: [] 所有選中的項
4. 翻頁的時候將questions的數據在allSelecteds判斷是否存在,存在就設置為選中
使用到的elementUI提供的事件或方法
| 事件名或方法名 | 說明 | 參數 |
| --- | --- | ---|
| select | 當用戶手動勾選數據行的 Checkbox 時觸發的事件 | selection, row |
| select-all | 當用戶手動勾選全選 Checkbox 時觸發的事件 | selection |
| clearSelection | 用于多選表格，清空用戶的選擇 | |
| toggleRowSelection | 用于多選表格，切換某一行的選中狀態，如果使用了第二個參數，則是設置這一行選中與否（selected 為 true 則選中） | row, selected |
## 主要方法
翻頁方法
~~~
this.multipleSelection = [];
let len = this.allSelecteds.length;
// 需要在表格el-table上添加 ref="multipleTable"
this.$refs.multipleTable.clearSelection();
setTimeout(() => {
for (let i = 0; i < len; i++) {
for(let j = 0;j<this.questions.length;j++) {
// 判斷數據是否選中
if (this.allSelecteds[i].id === this.questions[j].id) {
this.$refs.multipleTable.toggleRowSelection(this.questions[j]);
this.multipleSelection.push(this.questions[i]);
break;
}
}
}
}, 100);
~~~
select事件觸發的方法
~~~
// 當用戶手動勾選數據行的 Checkbox 時觸發的事件
handleSelection(selection, row) {
if (this.checkScore(row)) {
this.select(selection, row);
} else {
this.$refs.multipleTable.toggleRowSelection(row);
}
return false;
},
~~~
select-all 事件觸發的方法
~~~
// 當用戶手動勾選全選 Checkbox 時觸發的事件
handleSelectionAll(selection) {
for (let i = selection.length - 1; i >= 0; i--) {
if (!this.checkScore(selection[i])) {
this.$refs.multipleTable.clearSelection();
}
}
this.select(selection);
},
~~~
select 事件和select-all 事件公有部分
~~~
select(selection, row) {
let isSave = false;
let selectionLength = selection.length;
if (this.allSelecteds.length < 1) {
this.allSelecteds = this.allSelecteds.concat(selection);
} else {
//select 事件
if (row) {
// 點擊選中試題
if (JSON.stringify(selection).indexOf(JSON.stringify(row)) !== -1) {
this.delOrSaveSeleted(row, true);
} else {
// 從全部選中試題里把取消的這條數據刪除
this.delOrSaveSeleted(row);
}
//select-all 事件
} else {
// 點擊全選全部選中本頁
if (selectionLength > 0) {
isSave = true;
} else {
// 點擊全選取消選中本頁的試題
isSave = false;
selection = this.multipleSelection;
}
for (let i = 0; i < selection.length; i++) {
this.delOrSaveSeleted(selection[i], isSave);
}
}
}
if(selectionLength>0) {
this.multipleSelection = selection;
} else {
this.multipleSelection = [];
}
},
~~~
刪除或添加全部選中的試題
~~~
// 刪除或添加全部選中的試題
delOrSaveSeleted(row, isSave) {
let len = this.allSelecteds.length;
for (let i = 0; i < len; i++) {
if (this.allSelecteds[i].id === row.id) {
if(!isSave) {
this.allSelecteds.splice(i, 1);
}
return;
}
}
if(isSave ) {
this.allSelecteds.push(row);
}
},
~~~
參考[https://blog.csdn.net/github_36327470/article/details/72652518](https://blog.csdn.net/github_36327470/article/details/72652518)
