vue基于element-ui的三级CheckBox复选框功能的实现代码

最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，下面通过本文给大家讲解实现方法。

效果图预览：

首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能

      
 
   
 
 分区名称
 国家
 派送商
      
      
 
   

 
 
{{ partition.partitionName }}
 
   {{country.fieldName}}
 
 
   

     {{ item.distributors }}
   
 
      
    

接下来是数据结构，自定义的，可以更后台商议，但是字段indeterminate（显示不确定状态~符号），selected（CheckBox选中状态）一定要让后台加入到data中，其他可以按照后台数据来。

distributorsInfo:[
   { partitionName:'1区',selected:false,partitionId:1,isIndeterminate:false,
     country:[
     {  id: "1",fieldName: "奥地利",fieldTableName: "奥地利",distributors:'UPS',selected: false},
     {  id: "2",fieldName: "芬兰",fieldTableName: "芬兰",distributors:'UPS',selected: false},
     {  id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
     {  id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
     {  id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
     {  id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
   },
   { partitionName:'2区',selected:false,partitionId:2,isIndeterminate:false,
     country:[
     {  id: "5",fieldName: "丹麦",fieldTableName: "单买",distributors:'',selected: false},
     {  id: "6",fieldName: "法国",fieldTableName: "法国",distributors:'',selected: false},]
   },
   { partitionName:'3区',selected:false,partitionId:3,isIndeterminate:false,
     country:[
     {  id: "7",fieldName: "德国",fieldTableName: "德国",distributors:'YODEL',selected: false},
     {  id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}]
   }
 ],
 ischeckAll:false,//一级全选状态

因为此处是三级复选，所以函数为三个change，具体有详细注释可以查看

handleCheckAllChange(e){//一级change事件
 this.ischeckAll = e
 if(e == true){
   this.indeterminate = false
   for(var i=0,len=this.distributorsInfo.length; i以下是页面完整组件代码可以使用预览





.deliverySetting{
  padding: 20px 0;
  position: relative;
  .el-table{
    thead{
      tr{
 th{
   font-size: 14px;
 }
      }
    }
    tbody{
      tr{
 td{
   vertical-align: baseline;
   p{
     line-height: 30px;
   }
   .el-checkbox-group{
     display: flex;
     flex-direction: column;
     label{
line-height: 30px;
margin-left: 0;
     }
   }
 }
      }
    }
  }
  .deliverySetting-table{
    font-size: 14px;
    color: #333;
    .table-head,
    .table-body{
      display: flex;
      padding: 10px 0;
      .selection{
 width: 45px;
 text-align: center;
 line-height: 36px;
      }
      .width185{
 width: 185px;
      }
      .width265{
 width: 265px;
      }
    }
    .table-head{
      height: 36px;
      align-items: center;
      background-color: #E7F2FF;
    }
    .table-body{
      border-bottom: 1px solid #e4e4e4;
      color: #666;
      &:hover{
 background-color: #f5f7fa;
      }
      .width265{
 display: flex;
 flex-direction: column;
 label{
   line-height: 30px;
   margin-left: 0;
   color: #666;
 }
      }
      p{
 line-height: 30px;
      }
    }
  }
  .deliverySetting-btn{
    
    height: 59px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: -55px;
    right: -16px;
    z-index: 100;
    .tabs-btn {
      min-width: 90px;
      height: 34px;
      line-height: 32px;
      padding: 0 10px;
      color: #2387f7;
      border: solid 1px #4fa2ff;
      background-color: #e7f2ff;
      cursor: pointer;
      &:nth-of-type(2) {
 margin: 0 15px;
      }
      input {
 border: none;
 background: transparent;
 color: inherit;
 cursor: inherit;
 outline: none;
 margin: 0;
 padding: 0;
      }
      &:hover {
 color: #fff;
 background-color: #2387f7;
      }
    }
  }
  .setDistributorDailog{
    .el-input{
      width: 270px;
    }
  }
}


好了，以后使用三级甚至多级复选都可以使用此方法添加change代码即可。
总结
以上所述是小编给大家介绍的vue基于element-ui的三级CheckBox复选框功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！