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<this.data.length;i++){//遍历选择的内容
                      if(this.data[i].ischecked==1){
                              this.checkAllBig
.push(this.data[i].affairtypeid)
                          }
                      for(var j=0;j<this.data[i].eventtype.length;j++){
                          if(this.data[i].eventtype[j].ischecked==1){
                              this.checkAll
.push(this.data[i].eventtype[j].eventtypeid)
                          }
                          for(var
k=0;k<this.data[i].eventtype[j].operation.length;k++){

if(this.data[i].eventtype[j].operation[k].ischecked==1){
                              this.checkOne
.push(this.data[i].eventtype[j].operation[k].actionid);}
                          }
                      }
                   }

               });


                   <div class="checkbox-table" v-for="(item,indexkey) in
data">
                       <template>
<el-checkbox class="check1" v-model="checkAllBig"
:label="item.affairtypeid" @change="handleCheckedCitiesChange(1,indexkey)
">{{item.affairtypename}}{{item.ischecked}}</el-checkbox>

                               <div v-for="(list,index2) in item.eventtype"
class="line-check" :key="list.eventtypeid">
                                   <el-checkbox class="check2" @change="
handleCheckedCitiesChange(2,indexkey,index2)" v-model="checkAll"
:label="list.eventtypeid" v-bind:style="{
'float':list.operation.length>0?'left':'none'}">{{list.eventtypename}}{{list.ischecked}}</el-checkbox>
                                   <el-checkbox-group v-model="checkOne"
class="checkGroup" >
                                   <el-checkbox v-for="(operate,index1)
in list.operation" :label="operate.actionid" :key="operate.actionid"
@change="handleCheckedCitiesChange(3,indexkey,index2,index1)
">{{operate.actionname}}{{operate.ischecked}}</el-checkbox>
                                   </el-checkbox-group>
                               </div>
                       </template>
                           </div>

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

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<this.data[a].eventtype.length;i++){
this.checkAll=this.checkAll.map(res=>{
if(res!=this.data[a].eventtype[i].eventtypeid){return res} }); for(var
j=0;j<this.data[a].eventtype[i].operation.length;j++){
this.checkOne=this.checkOne.map(res=>{
if(res!=this.data[a].eventtype[i].operation[j].actionid){return res;} }); } }
}else{ this.data[a].ischecked=1; for(var
i=0;i<this.data[a].eventtype.length;i++){
this.checkAll.push(this.data[a].eventtype[i].eventtypeid); for(var
j=0;j<this.data[a].eventtype[i].operation.length;j++){
this.checkOne.push(this.data[a].eventtype[i].operation[j].actionid);
this.actionids.push(this.data[a].eventtype[i].operation[j].actionid) } } }
this.api(this.data[a].ischecked);//调用接口把选择的传过去 }else if(type ==2){//第二级全选
this.actionids=[];
this.data[a].eventtype[b].ischecked=this.data[a].eventtype[b].ischecked==1?0:1;
for(var i=0;i<this.data[a].eventtype[b].operation.length;i++){
if(this.data[a].eventtype[b].ischecked==1){
this.checkOne.push(this.data[a].eventtype[b].operation[i].actionid);
this.$set(this.data[a].eventtype[b].operation[i],"ischecked",1); } else{
this.$set( this.data[a].eventtype[b].operation[i],"ischecked",0);
this.checkOne=this.checkOne.map(res=>{ 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<len;i++){
if(this.data[a].eventtype[b].operation[i].ischecked==1){ num2++;//选中计数 } else{
num1++;//没选计数 } } if(num1==len){ this.checkAll=this.checkAll.map(res=>{
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' }); }) },

热门工具换一换