zoukankan      html  css  js  c++  java
  • element-ui 里面el-checkbox多选框,实现全选单选

    data里面定义了

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

                          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'
    });
    })
    },

    引用自夏天想

  • 相关阅读:
    洛谷 [SDOI2015]约数个数和 解题报告
    multiset-count
    multiset-begin
    multiset-begin
    set-value_comp
    set-value_comp
    multiset-constructors
    multiset-constructors
    set-upper_bound
    set-upper_bound
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/10097992.html
Copyright © 2011-2022 走看看