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

短命女 2021-12-16 20:15 330阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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-table">
     13             <div class="table-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="table-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,partition.partitionId,$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         
     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: "奥地利",fieldTableName: "奥地利",distributors:'UPS',selected: false},
     88                         {   id: "2",fieldName: "芬兰",fieldTableName: "芬兰",distributors:'UPS',selected: false},
     89                         {   id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
     90                         {   id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
     91                         {   id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
     92                         {   id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
     93                     },
     94                     { partitionName:'2区',selected:false,partitionId:2,isIndeterminate:false,
     95                         country:[
     96                         {   id: "5",fieldName: "丹麦",fieldTableName: "单买",distributors:'',selected: false},
     97                         {   id: "6",fieldName: "法国",fieldTableName: "法国",distributors:'',selected: false},]
     98                     },
     99                     { partitionName:'3区',selected:false,partitionId:3,isIndeterminate:false,
    100                         country:[
    101                         {   id: "7",fieldName: "德国",fieldTableName: "德国",distributors:'YODEL',selected: false},
    102                         {   id: "8",fieldName: "瑞士",fieldTableName: "瑞士",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, message: '字段不能为空',trigger: 'blur'}],
    116                 },
    117             }
    118         },
    119         computed: {
    120         },
    121         methods: {
    122             handleCheckAllChange(e){
          //一级change事件
    123                 this.ischeckAll = e
    124                 if(e == true){
    125                     this.indeterminate = false
    126                     for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二级全选反选不确定
    127                         this.distributorsInfo[i].selected = e
    128                         for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
    129                             this.distributorsInfo[i].country[j].selected = e
    130                         }
    131                     }
    132                 }else{
    133                     this.indeterminate = false
    134                     for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三级全选反选不确定
    135                         this.distributorsInfo[i].selected = e
    136                         for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
    137                             this.distributorsInfo[i].country[j].selected = e
    138                         }
    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].country
    146                 if(childrenArray)
    147                     for(var i=0,len=childrenArray.length; i<len; i++)
    148                         childrenArray[i].selected = e
    149 
    150                 this.getIsCheckAll()
    151             },
    152             handleCheckedCountryChange(topIndex, sonId, topId, e){
          //三级change事件
    153                 var childrenArray = this.distributorsInfo[topIndex].country
    154                 var tickCount = 0, unTickCount = 0, len = childrenArray.length
    155                 for(var i = 0; i < len; i++){
    156                     if(sonId == childrenArray[i].id) childrenArray[i].selected = e
    157                     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 = false
    163                 } else if(unTickCount == len) {
          //三级级全不勾选
    164                     this.distributorsInfo[topIndex].selected = false 
    165                     this.distributorsInfo[topIndex].indeterminate = false
    166                 } else {
    167                     this.distributorsInfo[topIndex].selected = false
    168                     this.distributorsInfo[topIndex].indeterminate = true //添加二级不确定状态
    169                 }
    170 
    171                 this.getIsCheckAll()
    172             },
    173             getIsCheckAll(){
    174                 var tickCount = 0, unTickCount = 0, ArrLength = this.distributorsInfo.length
    175                 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 = true
    181                     this.indeterminate = false
    182                 } else if(unTickCount == ArrLength) {
          //二级全不勾选
    183                     this.ischeckAll = false
    184                     this.indeterminate = false
    185                 } else {
    186                     this.ischeckAll = false
    187                     this.indeterminate = true //添加一级不确定状态
    188                 }
    189             },
    190 
    191             showSetDistributorDailog(){
    192                 this.setDistributorDailog=true
    193             },
    194             showCancelDistributorDailog(){
    195                 this.cancelDistributorDailog=true
    196             }
    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: relative;
    211     .el-table{
    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-table{
          
    239         font-size: 14px;
    240         color: #333;
    241         .table-head,
    242         .table-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         .table-head{
          
    258             height: 36px;
    259             align-items: center;
    260             background-color: #E7F2FF;
    261         }
    262         .table-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>

转载于:https://www.cnblogs.com/lljboke/p/10926860.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211216/a9c325590367402d9d706b57fa6470dc.png