# 需求:
多选框表格数据在翻页时,显示当前页选中的项
第一页选中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)
