在网上查找了很久,发现网上目前只有单独的全选功能,没有实现选择子节点后,来影响全选按钮的样式,下面直接上代码

首先是template部分

<template>
  <div>
    <el-checkbox size="mini" :indeterminate="isIndeterminate"  v-model="new_task_form.case_checkAll" @change="handleCheckAllChange" style="padding:0px;margin-right:5px;">全选</el-checkbox>
  </div>
  <el-tree
     style="max-height: 200px;overflow: auto;"
     :data="casedata"
     show-checkbox
     :default-expand-all="false"
     node-key="id"
     ref="casetree"
     highlight-current
     :props="defaultPorps"
      @check-change="case_check_change">
   </el-tree>
</template>

然后是js部分

data(){

    return {
        new_task_form:{
            "case_checkAll":false //全选按钮的绑定值
        },
        isIndeterminate:false,//全选按钮的全选,半选样式 
    }
},
methods:{
    case_check_change(node1,node2,node3){//树节点check事件
            let checked_count = 0;//被勾选上的一级节点个数
            let disabled_count = 0;//置灰的一级节点个数
            let indeterminate_flag = false;//有没有一级节点处于半选状态
            //遍历所有一级节点
            for(let i=0;i<this.casedata.length;i++){
                if(this.$refs.casetree.getNode(this.casedata[i]).disabled==true){
                    disabled_count += 1;//如果有置灰的节点,置灰变量加1
                }
                if(this.$refs.casetree.getNode(this.casedata[i]).checked==true){
                    checked_count += 1;//如果有勾选的节点,勾选变量加1
                }
                if(this.$refs.casetree.getNode(this.casedata[i]).indeterminate==true){
                    indeterminate_flag = true;//如果有半选的节点,半选变量设为true
                }
            }
            
            if(checked_count==0){
                this.isIndeterminate = false;
                this.new_task_form.case_checkAll = false;//如果勾选的一级节点数为0,则设置全选按钮样式不为半选样式,全选的值为false

                if(indeterminate_flag==true){//如果下面有半选的,设置全选按钮的样式为半选样式
                    this.isIndeterminate = true;
                    this.new_task_form.case_checkAll = false;
                }
                
            }
            else if((checked_count+disabled_count)==this.casedata.length){//如果树上勾上的和置灰的加起来等于tree上data的长度,设置全选按钮样式不为半选样式,全选值为true
                this.isIndeterminate = false;
                this.new_task_form.case_checkAll = true;
                
            }
            else{//上面条件不满足,则说明没有全部勾上,设置样式为半选,全选值为false
                this.isIndeterminate = true;
                this.new_task_form.case_checkAll = false;
                
            }
            return;
            
        },
        handleCheckAllChange(val){//全选按钮勾上的方法事件
            this.isIndeterminate = false;//设置全选按钮样式不为半选
            if(this.new_task_form.case_checkAll==true){//如果是当前值是全选,依次遍历节点设置勾选,同时过滤的disabled为true的
                for(let i=0;i<this.casedata.length;i++){
                    if(this.$refs.casetree.getNode(this.casedata[i]).disabled==false){
                        this.$refs.casetree.setChecked(this.casedata[i].id,true,true);
                    }
                }
                
            }
            else{//当前值不是全选,设置勾选列表为空
                 this.$refs.casetree.setCheckedKeys([]);
            }
            
        },
        
}

Logo

前往低代码交流专区

更多推荐