element-ui 里面el-checkbox多选框，实现全选单选

效果图

 

接口数据。是一个三层循环的数组。先是data -eventtype-operation  每个数据里面有个ischecked的属性用来表示他是否选中

 

data里面定义了

       data:[],
        actionids:[],//选择的那个actionid
        num1:0,//没选择的计数
        num2:0,//选中的计数
        checkAllBig: [],
        checkAll:[],
        checkOne:[],

先获取所有的数据

        getRolePowerList({roleid:this.roleid}).then((res) => {
                     this.data=res.data;
                     for(var i=0;i                          if(this.data[i].ischecked==1){
                                 this.checkAllBig.push(this.data[i].affairtypeid)
                             }
                         for(var j=0;j                              if(this.data[i].eventtype[j].ischecked==1){
                                 this.checkAll.push(this.data[i].eventtype[j].eventtypeid)
                             }
                             for(var k=0;k                                  if(this.data[i].eventtype[j].operation[k].ischecked==1){
                                 this.checkOne.push(this.data[i].eventtype[j].operation[k].actionid);}
                             }
                         }
                     }
         
                });

 

                        

                            
                            

在这里写了一个函数名，通过不同的参数来分别处理

 

   handleCheckedCitiesChange(type,a=0,b=0,c=0) {//多选框
if(type==1){//最高级全选
	this.actionids=[];
	if(this.data[a].ischecked==1){
		this.data[a].ischecked=0;
		for(var i=0;i{
				if(res!=this.data[a].eventtype[i].eventtypeid){return res}
			});
			for(var j=0;j{
					if(res!=this.data[a].eventtype[i].operation[j].actionid){return res;}
				});
			}
		}
	}else{
		this.data[a].ischecked=1;
		for(var i=0;i{
	     		 	if( res!=this.data[a].eventtype[b].operation[i].actionid){return res;}
		       })
	     	}
	 
	     	this.actionids.push(this.data[a].eventtype[b].operation[i].actionid);

  		}
  		    
		this.api(this.data[a].eventtype[b].ischecked);
		
}else{//单选
		var num1=0;
		var num2=0;
	var len=this.data[a].eventtype[b].operation.length;//单选框长度

this.data[a].eventtype[b].operation[c].ischecked=this.data[a].eventtype[b].operation[c].ischecked==1?0:1;
	for(var i=0;i{
			if(res!=this.data[a].eventtype[b].eventtypeid){return res;}
		});
		this.data[a].eventtype[b].ischecked=0;
	}
	if(num2==len){
		this.checkAll.push(this.data[a].eventtype[b].eventtypeid)
		this.data[a].eventtype[b].ischecked=1;
		this.$set(this.data[a].eventtype[b],"ischecked",1);
	}
	
	
	this.actionids=this.data[a].eventtype[b].operation[c].actionid;
	
	this.api(this.data[a].eventtype[b].operation[c].ischecked)
}

api(ischecked){//权限选择接口
      	let para={
      		roleid:this.roleid,
      		ischecked:ischecked,
      		actionid:this.actionids.toString(),
      	}      	
      addRolePower(para).then((res)=>{//取消权限
      		 	this.$notify({
		          message:res.msg,
		          type: 'success'
	        });
      	})	
      },