老板要求:当第一页的checkbox全部选中,点击翻到第二页(发了分页请求),再点击第一页发现checkbox没有选中效果。
前提这里不是table写的列表,table跨分页选中效果类似解决
具体看代码:
image.png
//全选的代码 -html
<div>
<el-checkbox v-model="isCheckAll" @change="checkAllToggle" style="margin-left: 20px;">全选</el-checkbox>
</div>
//全选方法-js
checkAllToggle(val) {
this.isCheckAll = val;
if(this.isCheckAll) {
// mistakenQuestions:接口查询出来的数据源
this.mistakenQuestions.forEach(item => {
// errorDataChecked:保存选中的列表
this.errorDataChecked.push(item.id);
this.errorDataChecked = [...new Set(this.errorDataChecked)];
})
} else {
this.mistakenQuestions.forEach(item => {
let index = this.errorDataChecked.findIndex(list => {
return item.id == list;
})
if(index >= 0) {
this.errorDataChecked.splice(index, 1);
}
})
}
},
// 单选部分 - html
<div class="item-check" >
<el-checkbox :value="errorDataChecked.join().indexOf(item.id) != -1" @change="changeCheckedFn(item)">{{item.id}}</el-checkbox>
</div>
// 单选部分 - js
changeCheckedFn(item) {
// errorDataChecked:保存选中的列表
let findIndex = this.errorDataChecked.findIndex(o => {
return o === item.id;
});
if(findIndex != -1) {
this.errorDataChecked.splice(findIndex, 1);
} else {
this.errorDataChecked.push(item.id);
}
// 是否选中全选
var arr = JSON.parse(JSON.stringify(this.mistakenQuestions))
for(var i = arr.length - 1 ; i >= 0 ; i -- ){
for(var j = 0 ; j < this.errorDataChecked.length ; j ++ ){
if(arr[i].id == this.errorDataChecked[j]){
arr.splice(i,1)
break;
}
}
}
},
网友评论