乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • vue如何实现基于element-ui的三级CheckBox复选框

    小编给大家分享一下vue如何实现基于element-ui的三级CheckBox复选框，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

    成都创新互联-专业网站定制、快速模板网站建设、高性价比延津网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式延津网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖延津地区。费用合理售后完善，十多年实体公司更值得信赖。

    效果图预览：

    vue如何实现基于element-ui的三级CheckBox复选框

    首先是页面布局，当然也可已使用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;
      }
      .width285{
        width: 185px;
      }
      .width365{
        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;
      }
      .width365{
        display: flex;
        flex-direction: column;
        label{
          line-height: 30px;
          margin-left: 0;
          color: #666;
        }
      }
      p{
        line-height: 30px;
      }
    }
  }
  .deliverySetting-btn{
    /*width: 100%;*/
    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复选框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
                
            
                        
    
            文章标题：vue如何实现基于element-ui的三级CheckBox复选框            
    
            本文链接：http://lszwz.com/article/jhgooj.html
        
    
    
    
        
    其他资讯
    
        
    
    


    
    
    
        
    
            
    
            
    售后响应及时
    7×24小时客服热线
        
    
        
    
            
    
            
    数据备份
    更安全、更高效、更稳定
        
    
        
    
            
    
            
    价格公道精准
    项目经理精准报价不弄虚作假
        
    
        
    
            
    
            
    合作无风险
    重合同讲信誉，无效全额退款
        
    
    
    

    

    
    
    
        
    
            
    
                
    
                    
    联系我们
    
                    TEL
                
    
                
    
                    
    135-1821-9792
    
                    
    028-86922220
    
                    
    地址：乐山市太升南路288号锦天国际
    

                
    
            
    
            
    
                
    
                    
    快捷导航
    
                    Shortcut
                
    
                
    
                    
      
                    
    
                    
                    
                    
                    
                    
    
                
    
            
    
            
    
                
    
                    
    二维码
    
                    QR CODE
                
    
                
    
                    
      
                        
    • 
                            
      微信公众号
      
                        
      • 
                        
    • 
                            
      手机端网站
      
                        
      • 
                        
      
                    
    
                
    
            
    
            
    
        
    
    
    
    
    
        
    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
        
    
        
    
            
    
                友情链接
                交换友情链接
            
    
            
    
                
    
                    宜宾网站营销推广   成都二枢机房   四川胜锦安防   外贸网站建设方案   成都服务器租用   成都网站制作   四川雅安服务器托管   东电技服   成都网站改版   成都做网站                   
    
            
    
        
    
    
    
    
    
        
    
            
            
    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25
                

            
    
            
    
        
    
    
    
    
    
        
    
            
            
    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 
    
            
     蜀ICP备2021004003号-25