vue基于element-ui的三级CheckBox复选框

概述1 <template> 2 <div class="deliverySetting"> 3 <div class="deliverySetting-btn"> 4 <div class="tabs-btn ac"> 5 <input type="button" value="分配派送商" @c

  1 <template>  2     <div class="deliverySetting">  3         <div class="deliverySetting-btn">  4             <div class="tabs-btn ac">  5                 <input type="button" value="分配派送商" @click="showSetdistributorDailog">  6             </div>  7             <div class="tabs-btn ac">  8                 <input type="button" value="取消分配" @click="showCanceldistributorDailog">  9             </div> 10         </div> 11  12         <div class="deliverySetting-@R_404_5991@"> 13             <div class="@R_404_5991@-head"> 14                 <div class="selection"> 15                     <el-checkBox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkBox> 16                 </div> 17                 <div class="wIDth185">分区名称</div> 18                 <div class="wIDth265">国家</div> 19                 <div>派送商</div> 20             </div> 21             <div class="@R_404_5991@-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex"> 22                 <div class="selection"> 23                     <p><el-checkBox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionID,$event)" :key="partitionIndex"></el-checkBox></p> 24                 </div> 25                 <div class="wIDth185"><p>{{ partition.partitionname }}</p></div> 26                 <div class="wIDth265"> 27                     <el-checkBox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.ID,$event)" :label="country" :key="country.ID">{{country.fIEldname}}</el-checkBox> 28                 </div> 29                 <div> 30                     <p v-for="(item,index) in partition.country" :key="index"> 31                         {{ item.distributors }} 32                     </p> 33                 </div> 34             </div> 35         </div> 36  37         <!-- 分配派送商dailog --> 38         <el-dialog Title="分配派送商" :visible.sync="setdistributorDailog" wIDth="480px"> 39             <el-form :model="distributorForm" :rules="rules" class="setdistributorDailog"> 40                 <el-form-item label="派送代理商" label-wIDth="120px"> 41                     <el-input v-model="distributorForm.vendorname" auto-complete="off" placeholder="请输入供应商名称"></el-input> 42                 </el-form-item> 43                 <el-form-item label="末端派送商" prop="sendername" label-wIDth="120px"> 44                     <el-select v-model="distributorForm.sendername" 45                     filterable 46                     allow-create 47                     default-first-option 48                     placeholder="请选派送商名称"> 49                         <el-option label="派送商1" value="shanghai"></el-option> 50                         <el-option label="派送商2" value="beijing"></el-option> 51                     </el-select> 52                 </el-form-item> 53                 <el-form-item label="派送商官网" prop="website" label-wIDth="120px"> 54                     <el-input v-model="distributorForm.website" auto-complete="off" placeholder="请输入派送商官网"></el-input> 55                 </el-form-item> 56             </el-form> 57             <div slot="footer" class="dialog-footer"> 58                 <el-button @click="setdistributorDailog = false">取 消</el-button> 59                 <el-button type="primary" @click="setdistributorDailog = false">确 定</el-button> 60             </div> 61         </el-dialog> 62  63         <!-- 取消分配派送商 --> 64         <el-dialog Title="停止提示" :visible.sync="canceldistributorDailog" :modal="false" wIDth="480px" custom-class="stop-coupon-dialog"> 65             <p><br></p> 66             <p class="ac f16">您确定要取消对的派送分配吗？</p> 67             <p><br></p> 68             <span slot="footer" class="dialog-footer"> 69                 <el-button @click="canceldistributorDailog = false">取 消</el-button> 70                 <el-button type="primary" @click="canceldistributorDailog=false">确 定</el-button> 71             </span> 72         </el-dialog> 73     </div> 74 </template> 75 <script> 76     export default { 77         name:‘deliverySetting‘, 78         components: { 79         }, 80         props:{ 81         }, 82         data() { 83             return { 84                 distributorsInfo:[ 85                     { partitionname:‘1区‘,selected:false,partitionID:1,isIndeterminate:false, 86                         country:[ 87                         {   ID: "1",fIEldname: "奥地利",fIEld@R_404_5991@name: "奥地利",distributors:‘UPS‘,selected: false}, 88                         {   ID: "2",fIEldname: "芬兰",fIEld@R_404_5991@name: "芬兰", 89                         {   ID: "3",fIEldname: "意大利",fIEld@R_404_5991@name: "意大利", 90                         {   ID: "4",fIEldname: "葡萄牙",fIEld@R_404_5991@name: "葡萄牙", 91                         {   ID: "9",fIEldname: "西班牙",fIEld@R_404_5991@name: "西班牙", 92                         {   ID: "10",fIEldname: "瑞典",fIEld@R_404_5991@name: "瑞典",] 93                     }, 94                     { partitionname:‘2区‘,partitionID:2, 95                         country:[ 96                         {   ID: "5",fIEldname: "丹麦",fIEld@R_404_5991@name: "单买",distributors:‘‘, 97                         {   ID: "6",fIEldname: "法国",fIEld@R_404_5991@name: "法国",] 98                     }, 99                     { partitionname:‘3区‘,partitionID:3,100                         country:[101                         {   ID: "7",fIEldname: "德国",fIEld@R_404_5991@name: "德国",distributors:‘YODEL‘,102                         {   ID: "8",fIEldname: "瑞士",fIEld@R_404_5991@name: "瑞士",distributors:‘DPD‘,selected: false}]103                     }104                 ],105                 ischeckAll:false,//一级全选状态106                 setdistributorDailog:false,107                 canceldistributorDailog:false,108                 distributorForm:{109                     vendorname:‘‘,110                     sendername:‘‘111                 },112                 indeterminate:false,113                 rules: {114                     sendername: [{ required: true,message: ‘字段不能为空‘,trigger: ‘blur‘}],115                     website: [{ required: true,116                 },117             }118         },119         computed: {120         },121         methods: {122             handleCheckAllChange(e){//一级change事件123                 this.ischeckAll = e124                 if(e == true){125                     this.indeterminate = false126                     for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二级全选反选不确定127                         this.distributorsInfo[i].selected = e128                         for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){129                             this.distributorsInfo[i].country[j].selected = e130                         }131                     }132                 }else{133                     this.indeterminate = false134                     for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三级全选反选不确定135                         this.distributorsInfo[i].selected = e136                         for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){137                             this.distributorsInfo[i].country[j].selected = e138                         }139                     }140                 }141             },142             handleCheckedCountryAllChange(index,topID,e){//二级change事件143                 this.distributorsInfo[index].selected = e//二级勾选后，子级全部勾选或者取消144                 if(e == false) this.distributorsInfo[index].indeterminate = false //去掉二级不确定状态145                 var childrenArray = this.distributorsInfo[index].country146                 if(childrenArray)147                     for(var i=0,len=childrenArray.length; i<len; i++)148                         childrenArray[i].selected = e149 150                 this.getIsCheckAll()151             },152             handleCheckedCountryChange(topIndex,sonID,e){//三级change事件153                 var childrenArray = this.distributorsInfo[topIndex].country154                 var tickCount = 0,unTickCount = 0,len = childrenArray.length155                 for(var i = 0; i < len; i++){156                     if(sonID == childrenArray[i].ID) childrenArray[i].selected = e157                     if(childrenArray[i].selected == true) tickCount++158                     if(childrenArray[i].selected == false) unTickCount++159                 }160                 if(tickCount == len) {//三级级全勾选161                     this.distributorsInfo[topIndex].selected = true 162                     this.distributorsInfo[topIndex].indeterminate = false163                 } else if(unTickCount == len) {//三级级全不勾选164                     this.distributorsInfo[topIndex].selected = false 165                     this.distributorsInfo[topIndex].indeterminate = false166                 } else {167                     this.distributorsInfo[topIndex].selected = false168                     this.distributorsInfo[topIndex].indeterminate = true //添加二级不确定状态169                 }170 171                 this.getIsCheckAll()172             },173             getIsCheckAll(){174                 var tickCount = 0,ArrLength = this.distributorsInfo.length175                 for(var j=0; j<ArrLength; j++){//全选checkBox状态176                     if(this.distributorsInfo[j].selected == true) tickCount++177                     if(this.distributorsInfo[j].selected == false) unTickCount++178                 }179                 if(tickCount == ArrLength) {//二级全勾选180                     this.ischeckAll = true181                     this.indeterminate = false182                 } else if(unTickCount == ArrLength) {//二级全不勾选183                     this.ischeckAll = false184                     this.indeterminate = false185                 } else {186                     this.ischeckAll = false187                     this.indeterminate = true //添加一级不确定状态188                 }189             },190 191             showSetdistributorDailog(){192                 this.setdistributorDailog=true193             },194             showCanceldistributorDailog(){195                 this.canceldistributorDailog=true196             }197         },198         created: function() {199         },200         mounted: function() {201             // (async() => {202         },203         watch: {204         }205     }206 </script>207 <style lang="sCSS">208 .deliverySetting{209     padding: 20px 0;210     position: @R_301_4614@;211     .el-@R_404_5991@{212         thead{213             tr{214                 th{215                     Font-size: 14px;216                 }217             }218         }219         tbody{220             tr{221                 td{222                     vertical-align: baseline;223                     p{224                         line-height: 30px;225                     }226                     .el-checkBox-group{227                         display: flex;228                         flex-direction: column;229                         label{230                             line-height: 30px;231                             margin-left: 0;232                         }233                     }234                 }235             }236         }237     }238     .deliverySetting-@R_404_5991@{239         Font-size: 14px;240         color: #333;241         .@R_404_5991@-head,242         .@R_404_5991@-body{243             display: flex;244             padding: 10px 0;245             .selection{246                 wIDth: 45px;247                 text-align: center;248                 line-height: 36px;249             }250             .wIDth185{251                 wIDth: 185px;252             }253             .wIDth265{254                 wIDth: 265px;255             }256         }257         .@R_404_5991@-head{258             height: 36px;259             align-items: center;260             background-color: #E7F2FF;261         }262         .@R_404_5991@-body{263             border-bottom: 1px solID #e4e4e4;264             color: #666;265             &:hover{266                 background-color: #f5f7fa;267             }268             .wIDth265{269                 display: flex;270                 flex-direction: column;271                 label{272                     line-height: 30px;273                     margin-left: 0;274                     color: #666;275                 }276             }277             p{278                 line-height: 30px;279             }280         }281     }282     .deliverySetting-btn{283         /*wIDth: 100%;*/284         height: 59px;285         display: flex;286         justify-content: flex-end;287         align-items: center;288         position: absolute;289         top: -55px;290         right: -16px;291         z-index: 100;292         .tabs-btn {293             min-wIDth: 90px;294             height: 34px;295             line-height: 32px;296             padding: 0 10px;297             color: #2387f7;298             border: solID 1px #4fa2ff;299             background-color: #e7f2ff;300             cursor: pointer;301             &:nth-of-type(2) {302                 margin: 0 15px;303             }304             input {305                 border: none;306                 background: transparent;307                 color: inherit;308                 cursor: inherit;309                 outline: none;310                 margin: 0;311                 padding: 0;312             }313             &:hover {314                 color: #fff;315                 background-color: #2387f7;316             }317         }318     }319     .setdistributorDailog{320         .el-input{321             wIDth: 270px;322         }323     }324 }325 </style>

VIEw Code 总结

以上是内存溢出为你收集整理的vue基于element-ui的三级CheckBox复选框全部内容，希望文章能够帮你解决vue基于element-ui的三级CheckBox复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。