美文网首页
2020-01-16 element 解决el-checkbox

2020-01-16 element 解决el-checkbox

作者: jinya2437 | 来源:发表于2020-01-16 15:44 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:2020-01-16 element 解决el-checkbox

          本文链接:https://www.haomeiwen.com/subject/hmifzctx.html