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

    引用自夏天想

  • 相关阅读:
    【转】VirtualBox虚拟机网络设置(四种方式)
    笔、面试时OS常见题目【转】【Updating】
    【转】Vim教程
    【部分原创】刚安装好的linux中aptget配置代理的方法
    【原创长文】openstack 版本D安装配置及本次安装中遇到的问题
    单链表反转函数
    摆正心态
    C# XmlSerializer实现序列化浅析
    C#中虚函数和抽象函数的区别
    在Win7(64位)系统下运行World Wind源码程序出现“未处理BadImageFormatException”错误解决方法(另:附加信息)
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/10097992.html
Copyright © 2011-2022 走看看