2020-01-16 element 解决el-checkbox

2020-01-16  本文已影响0人  jinya2437

老板要求:当第一页的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;
            }
        }
    }
},

精华代码已粘贴出来了 妥妥的返回上一页 保持选中的状态

上一篇 下一篇

猜你喜欢

热点阅读