# 需求: 多選框表格數據在翻頁時,顯示當前頁選中的項 第一頁選中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)