真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue如何實現(xiàn)基于element-ui的三級CheckBox復(fù)選框

小編給大家分享一下vue如何實現(xiàn)基于element-ui的三級CheckBox復(fù)選框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比延津網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式延津網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋延津地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

效果圖預(yù)覽：

vue如何實現(xiàn)基于element-ui的三級CheckBox復(fù)選框

首先是頁面布局，當(dāng)然也可已使用table，但是自己用flex布局后面更容易增刪改查其他功能


      
        
          
        
        分區(qū)名稱
        國家
        
派送商
                                 

                 

{{ partition.partitionName }}

                   {{country.fieldName}}                  
                       {{ item.distributors }}           

        
           

接下來是數(shù)據(jù)結(jié)構(gòu)，自定義的，可以更后臺商議，但是字段indeterminate（顯示不確定狀態(tài)~符號），selected（CheckBox選中狀態(tài)）一定要讓后臺加入到data中，其他可以按照后臺數(shù)據(jù)來。

distributorsInfo:[
          { partitionName:'1區(qū)',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區(qū)',selected:false,partitionId:2,isIndeterminate:false,
            country:[
            {  id: "5",fieldName: "丹麥",fieldTableName: "單買",distributors:'',selected: false},
            {  id: "6",fieldName: "法國",fieldTableName: "法國",distributors:'',selected: false},]
          },
          { partitionName:'3區(qū)',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,//一級全選狀態(tài)

因為此處是三級復(fù)選，所以函數(shù)為三個change，具體有詳細(xì)注釋可以查看

handleCheckAllChange(e){//一級change事件
        this.ischeckAll = e
        if(e == true){
          this.indeterminate = false
          for(var i=0,len=this.distributorsInfo.length; i
以下是頁面完整組件代碼可以使用預(yù)覽



.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;
    }
  }
}

好了，以后使用三級甚至多級復(fù)選都可以使用此方法添加change代碼即可。
以上是“vue如何實現(xiàn)基于element-ui的三級CheckBox復(fù)選框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            當(dāng)前題目：vue如何實現(xiàn)基于element-ui的三級CheckBox復(fù)選框            

            網(wǎng)站地址：http://weahome.cn/article/jhgooj.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部