全选、反选checkbox复选框的

 

 

 

 

 

html部分：
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" label="全选"></el-checkbox>
<el-checkbox v-model="checkInvert" @change="handleCheckInvertChange()" label="反选"></el-checkbox>

js部分：

//全选
handleCheckAllChange(val) {
    let me = this;
    let checkedCount = this.checkedSubStation.length;
    if(checkedCount === this.subStationList.length){
        this.checkedSubStation = [];
        this.checkAll = false;
    }else if(val || (checkedCount < this.subStationList.length)){
        let array = [];
        for(let v of this.subStationList){
            array.push(v.subStationNO+"-"+v.subStationName);
        }
        this.checkedSubStation = array;
        this.checkAll = true;
    }else{
        this.checkedSubStation = [];
        this.checkAll = false;
    }
    this.isIndeterminate = false;
},
handleCheckedSubstationChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.subStationList.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.subStationList.length;
},
//反选
handleCheckInvertChange(val){
    let me = this;
    let noCheckedArray = [];
    for(let v of this.subStationList){
        if(me.checkedSubStation.indexOf(v.subStationNO+"-"+v.subStationName)===-1){
            noCheckedArray.push(v.subStationNO+"-"+v.subStationName);
        }
    }
    let checkedCount = noCheckedArray.length;
    this.checkedSubStation = noCheckedArray.length===0 ? [] : noCheckedArray;
    this.checkAll = noCheckedArray.length !== 0 ;
    this.isIndeterminate = checkedCount < this.subStationList.length && noCheckedArray.length !== 0;
},
//查询数据列表
getSubStation(data){
    let me = this;
    me.$axios.get(me.$url + '/getXXXXXXXXXXXXXXXXXXXXXXX', {
        params: {
            searchParam: JSON.stringify({
                mineCode: data.mineCode
            })
        }
    })
        .then(result => {
            if (result.data.success) {
                me.subStationList = result.data.data;
            }
        })
},