Collapse 折叠面板+Tabs 标签页+Checkbox 多选框 多层嵌套

需求如图

154304444.jpg

点击下方蓝色按钮,删除相应选项 并移到下部分,如图:

1543042419278.jpg

这部分需求是点击删除按钮相应选项回到上面。

刚接到需求的时候没有多少波澜 ,觉得可能会麻烦一点,开始做才开始慢慢崩溃,想逻辑想的思维一片混乱


难受.jpg

总之,这是一个逐渐自闭的过程,代码很乱 ,逻辑也很乱 ,艰难重重,所幸功能出来了:


<el-collapse v-model="form.shop_names" @change="handleChange" v-for="(editDiscountedArea,editDiscountedAreaIndex) in form.editDiscountedAreas" v-if="editDiscountedArea.id" :key="editDiscountedArea.id">

                <el-collapse-item :name="editDiscountedAreaIndex">

                    <template slot="title">

                        <el-checkbox :label="editDiscountedArea.id" :key="editDiscountedArea.id" :indeterminate="editDiscountedArea.isIndeterminate" v-model="editDiscountedArea.checkAll" @change="(value) => handleCheckAllChange1(value, editDiscountedAreaIndex)">@{{editDiscountedArea.name}}(@{{editDiscountedArea.totalNum}})</el-checkbox>

                    </template>

                    <el-checkbox-group v-model="editDiscountedArea.checkedShop" @change="(value) =>handleCheckedCitiesChange1(value, editDiscountedAreaIndex)">

                        <el-tabs v-model="editDiscountedArea.activeName">

                            <el-tab-pane label="用户管理" v-for="(entry,index) in editDiscountedArea.sons" v-if="entry.id" :key="entry.name" :name="entry.name">

                                <span slot="label">

                                    <!-- <input type="checkbox" :id="'checkbox_'+editDiscountedAreaIndex+'_'+index" :class="" @click="handleCheckAllChange2(editDiscountedAreaIndex,index)">@{{entry.name}}(@{{entry.totalNum}}) -->

                                    <el-checkbox class="clickIsFalse" :label="entry.name"  :key="entry.name" :indeterminate="entry.isIndeterminate" v-model="entry.checkAll" :checked="entry.checkAll" @change="(value) => handleCheckAllChange2(value, editDiscountedAreaIndex, index)">@{{entry.name}}(@{{entry.totalNum}})<span class="maskClick" @click.prevent.self="nothing()"></span></el-checkbox>

                                </span>

                                <el-checkbox-group v-model="entry.checkedShop" @change="(value) =>handleCheckedCitiesChange2(value, editDiscountedAreaIndex, index)">

                                    <el-checkbox v-for="(shop1,index) in entry.child" v-if="shop1.id" :label="shop1.name" :key="shop1.name">@{{shop1.name}}</el-checkbox>

                                </el-checkbox-group>

                            </el-tab-pane>

                        </el-tabs>

                    </el-checkbox-group>

                </el-collapse-item>

                </el-collapse>

这是页面部分

            <div v-if="form.discountAreaShow">
                <div class="discountSection-title"></div>
                <div class="discountSection">
                    <!-- <el-form-item class="commit-btn">
                        <el-button type="primary" @click="recovery">恢复上一次区域设置</el-button>
                    </el-form-item> -->
                    <el-form-item class="commit-btn">
                        <el-tabs v-model="form.activeName">
                            <el-tab-pane v-for="(discount,index) in form.discounts" v-if="discount" :key="discount.id" :label='discount.name + "折区域" +"("+discount.totalNum+")"' :name="discount.name">
                                <el-tabs v-model="discount.activeName1">
                                    <el-tab-pane v-for="(discountModel,discountModelIndex) in discount.sons" v-if="discountModel.id" :key="discountModel.name" :label='discountModel.name' :name="discountModel.name">
                                        <span slot="label">
                                            <el-checkbox :indeterminate="discountModel.isIndeterminate" v-model="discountModel.checkAll" @change="(value) => handleCheckAllChange3(value, discountModelIndex, index)">@{{discountModel.name}}(@{{discountModel.totalNum}})<span class="maskClick" @click.prevent.self="nothing()"></span></el-checkbox>
                                        </span>
                                        <el-checkbox-group v-model="discountModel.checkedShop" @change="(value) =>handleCheckedCitiesChange3(value, discountModelIndex, index)">
                                            <el-checkbox v-for="(discountItem,discountItemIndex) in discountModel.child" v-if="discountItem.id"  :label="discountItem.name" :key="discountItem.name">@{{discountItem.name}}</el-checkbox>
                                        </el-checkbox-group>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                    <el-form-item class="commit-btn">
                        <el-button type="primary"  @click="removeDiscount()">删除</el-button>
                    </el-form-item>
                    <div class="block"></div>
                    <el-form-item class="commit-btn" v-if="form.type">
                        <el-button type="primary" @click="submitForm()">保存活动</el-button>
                    </el-form-item>
                </div>
            </div>

这是下部分页面

handleCheckAllChange1(val,editDiscountedAreaIndex) { //未设置折扣区外部全选复选框
                let chooseAll = [];
                for(let value of this.form.editDiscountedAreas[editDiscountedAreaIndex].sons){
                    if(value.id){
                        chooseAll.push(value.name)
                        let chooseAll1 = [];
                        for(let value1 of value.child){
                            chooseAll1.push(value1.name)
                            value.checkedShop = val ? chooseAll1 : [];
                            value.isIndeterminate = false;
                        }
                    }
                }
                this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = val ? true : false;
                this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = val ? chooseAll : [];
                this.form.editDiscountedAreas[editDiscountedAreaIndex].isIndeterminate = false;
            },
            handleCheckAllChange2(val,editDiscountedAreaIndex,index){ //未设置折扣区内部全选复选框
                let chooseAll = []
                for(let value of this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id)){
                    chooseAll.push(value.name)
                }
                this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkAll = val ? true : false;
                this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkedShop = val ? chooseAll : [];
                this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].isIndeterminate = false;
            },
            handleCheckAllChange3(val,discountModelIndex,index) { //删除折扣区域
                let chooseAll = []
                for(let value of this.form.discounts[index].sons[discountModelIndex].child.filter(n=>n.id)){
                    chooseAll.push(value.name)
                }
                this.form.discounts[index].sons[discountModelIndex].checkAll = val ? true : false;
                this.form.discounts[index].sons[discountModelIndex].checkedShop = val ? chooseAll : [];
                this.form.discounts[index].sons[discountModelIndex].isIndeterminate = false;
            },
            handleCheckedCitiesChange1(value,editDiscountedAreaIndex) { //未设置折扣区外部复选框
                let checkedCount = value.filter(n=>n).length;
                this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = checkedCount === this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length;
                this.form.editDiscountedAreas[editDiscountedAreaIndex].isIndeterminate = checkedCount > 0 && checkedCount < this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length;
            },
            handleCheckedCitiesChange2(value,editDiscountedAreaIndex,index) { //未设置折扣区内部复选框
                let checkedCount = value.filter(n=>n).length;
                if(this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.indexOf(this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name) == -1){
                    this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.push(this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
                }
                let isIndeterminate = checkedCount > 0 && checkedCount < this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length;
                console.log(checkedCount,this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length,'2222222222')
                let checkAll = checkedCount === this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length;
                this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].isIndeterminate = isIndeterminate
                this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkAll = checkAll;
                if(!isIndeterminate && !checkAll){
                        this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.filter(n => n != this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
                        this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = false
                }else if(isIndeterminate){
                    this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.filter(n => n != this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
                    this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkedShop = value.filter(n=>n);
                    this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = false;
                } else{
                    if(this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.length == this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length){
                        this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = true;
                    }
                }
            },
            handleCheckedCitiesChange3(value,discountModelIndex,index) { //删除折扣区域
                let checkedCount = value.length;
                this.form.discounts[index].sons[discountModelIndex].checkAll = checkedCount === this.form.discounts[index].sons[discountModelIndex].child.length;
                this.form.discounts[index].sons[discountModelIndex].isIndeterminate = checkedCount > 0 && checkedCount < this.form.discounts[index].sons[discountModelIndex].child.length;
            },

这是复选框部分

            changeDiscount(discountItem){ //修改折扣
                
                this.form.discountAreaShow = true;
                this.form.activeName = discountItem;
                let i = 0;
                let nameValArry = [];
                // if(this.form.discountArr.indexOf(discountItem) != -1){
                //     nameValArry = this.form.discountArr;
                // }
                this.form.discounts.forEach((val,index) =>{
                    nameValArry.push(Number(val.name))
                })
                let editDiscountedAreas1 = [];
                this.form.editDiscountedAreas.forEach((valueDiscounted,indexDiscounted)=>{
                    if(valueDiscounted.id && valueDiscounted.sons.length != 0){
                        valueDiscounted.sons.forEach((valueSons,indexSons)=>{
                            if(valueSons.id && valueSons.checkedShop.length != 0){
                                editDiscountedAreas1.push(valueSons);
                            }
                        })
                    }
                })
                if(this.form.editDiscountedAreas.filter(n=>n.id&&n.sons.filter(s=>s.id&&s.checkedShop.length != 0).length !=0).length == 0){
                    if(this.form.discounts.filter(n=>n.name&&n.totalNum!=0).length != 0){
                        this.form.activeName = this.form.discounts[0].name;
                    }else{
                        this.form.discountAreaShow = false
                    }
                    this.$notify.error({
                        title: '错误',
                        message: '请选择要设置折扣的选项'
                    });
                }else{
                    if(nameValArry.indexOf(discountItem) == -1){ //设置的折扣是之前不存在的
                        let discount;
                        discount = {"name":discountItem,"activeName1":'',"totalNum":'',"sons":[]};
                        let totalNum = 0;
                        let typeArry = [];
                        editDiscountedAreas1.forEach((value1,index1)=>{
                            if(value1.id && value1.checkedShop.length != 0){
                                if(typeArry.indexOf(value1.name) == -1){
                                    let discount1 = {"name":value1.name,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value1.checkedShop.length,"child":[],"id":value1.id};
                                    value1.checkedShop.forEach((val1,index2)=>{
                                        discount1.child.push({"name":val1,"id":value1.id,});
                                    })
                                    totalNum = totalNum + value1.checkedShop.length;
                                    discount.sons.push(discount1);
                                    discount.activeName1 = value1.name;
                                    typeArry.push(value1.name);
                                }else{
                                    value1.checkedShop.forEach((val1,index2)=>{
                                        discount.sons[typeArry.indexOf(value1.name)].child.push({"name":val1,"id":value1.id,});
                                        discount.sons[typeArry.indexOf(value1.name)].totalNum += 1;
                                    })
                                    totalNum = totalNum + value1.checkedShop.length;
                                    discount.activeName1 = value1.name;
                                }
                            }
                        })
                        discount.totalNum = totalNum;
                        this.form.discounts.push(discount)//添加已设置折扣区新的折扣
                    }else{  //设置的折扣是之前存在
                        let nameValArryIndex = nameValArry.indexOf(discountItem); //存在的折扣的index
                        editDiscountedAreas1.forEach((value1,index1)=>{
                            if(value1.id && value1.checkedShop.length != 0){
                                let discount1 = {"name":value1.name,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value1.checkedShop.length,"child":[],"id":value1.id};
                                let nameValArry1 = [];
                                this.form.discounts[nameValArryIndex].sons.forEach((son,sonsIndex)=>{ nameValArry1.push(son.name)})
                                if(nameValArry1.indexOf(value1.name) == -1){ //如果折扣存在型号不存在
                                    value1.checkedShop.forEach((val1,index2)=>{
                                            if(val1){
                                                discount1.child.push({"name":val1,"id":value1.id});
                                            }
                                        })
                                        this.form.discounts[nameValArryIndex].sons.push(discount1);
                                    }else{
                                        let nameValArryIndex1 = nameValArry1.indexOf(value1.name); //存在的型号的index
                                        value1.checkedShop.forEach((val1,index2)=>{
                                            if(val1){
                                                this.form.discounts[nameValArryIndex].sons[nameValArryIndex1].child.push({"name":val1,"id":value1.id});
                                                this.form.discounts[nameValArryIndex].sons[nameValArryIndex1].totalNum += 1;
                                            }
                                        })
                                    }
                            }
                        })
                        this.form.discounts[nameValArryIndex].totalNum = 0;
                        this.form.discounts[nameValArryIndex].sons.forEach((numValue,numIndex)=>{  //计算改折扣的总数
                            if(numValue.id){
                                this.form.discounts[nameValArryIndex].totalNum = this.form.discounts[nameValArryIndex].totalNum  + numValue.totalNum;
                            }
                        })
                        this.form.discounts[nameValArryIndex].activeName1 = this.form.discounts[nameValArryIndex].sons.filter(n => n.id)[0].name;
                        this.form.activeName = this.form.discounts[nameValArryIndex].name;
                    }                         

                    this.form.editDiscountedAreas.forEach((value,index)=>{
                        if(value.id){
                            if(value.checkAll == true){ //删除所选部分
                            this.form.editDiscountedAreas.splice(index,1,{})
                            }else{
                                value.sons.forEach((value1,index1)=>{
                                    if(value1.id && value1.checkedShop.length != 0){
                                        if(value1.checkAll == true){
                                        this.form.editDiscountedAreas[index].sons.splice(index1,1,{});
                                        this.form.editDiscountedAreas[index].activeName = this.form.editDiscountedAreas[index].sons.filter(n => n.id)[0].name;
                                        this.form.editDiscountedAreas[index].totalNum = this.form.editDiscountedAreas[index].totalNum - value1.totalNum; 
                                        }else{
                                            let checkIndex = [];          
                                            for (i of this.form.editDiscountedAreas[index].sons[index1].child){
                                                checkIndex.push(i.name)
                                            }
                                            value1.checkedShop.forEach((val1,index2)=>{
                                                this.form.editDiscountedAreas[index].sons[index1].child.splice(checkIndex.indexOf(val1),1,{});
                                                this.form.editDiscountedAreas[index].sons[index1].totalNum = this.form.editDiscountedAreas[index].sons[index1].totalNum - 1;
                                                this.form.editDiscountedAreas[index].totalNum = this.form.editDiscountedAreas[index].totalNum - 1;
                                                if(this.form.editDiscountedAreas[index].sons[index1].child.filter(n=>n.id).length == 0){
                                                    this.form.editDiscountedAreas[index].sons.splice(index1,1,{});
                                                }
                                            })
                                            value1.checkedShop = [];
                                        }
                                    }
                                })

                            }

                            if(value.sons.length == 0){
                                this.form.editDiscountedAreas.splice(index,1,{});
                            }
                            value.checkedShop = [];
                        }
                    })
                }

                this.form.editDiscountedAreas.forEach((valueDiscounted,indexDiscounted)=>{ //去除复选框不确定表现
                    if(valueDiscounted.id){
                        valueDiscounted.isIndeterminate = false;
                        valueDiscounted.sons.forEach((valueDiscounted1,indexDiscounted1)=>{
                            if(valueDiscounted1.id){
                                valueDiscounted1.isIndeterminate = false;
                            }
                        })
                    }
                })
            },

这是点击折扣按钮的逻辑部分

            removeDiscount(){
                if(this.form.editDiscountedAreas.filter(n=>n.id&&n.sons.filter(s=>s.id&&s.checkedShop.length != 0).length !=0).length != 0){
                    this.$notify.error({
                        title: '错误',
                        message:'请先确定已勾选品牌的折扣'
                    });
                    return false;
                }
                let discounts1 = [];
                this.form.discounts.forEach((valueDiscounted,indexDiscounted)=>{
                        valueDiscounted.sons.forEach((valueSons,indexSons)=>{
                            if(valueSons.id && valueSons.checkedShop.length != 0){
                                let nameArry = [];
                                let checkIndex;
                                valueSons.child.forEach((valueSons2,indexSons)=>{
                                    nameArry.push(valueSons2.name)
                                })
                                valueSons.checkedShop.forEach((valueSons1,indexSons1)=>{
                                    checkIndex = nameArry.indexOf(valueSons1);
                                    discounts1.push(valueSons.child[checkIndex]);
                                });
                            }
                        })
                })
                discounts1.forEach((value,index)=>{
                    let idArry = [];
                    this.form.editDiscountedAreas.forEach((value1,index1)=>{
                        if(value.name){
                            idArry.push(value1.id)
                        }
                    })
                    if(value.name){
                        if(idArry.indexOf(value.id) == -1){ //没有这个品牌
                            let brand = '';
                            this.form.editDiscountedAreasCopy.forEach((valCopy,indexCopy)=>{ //获取品牌名
                                if(value.id == valCopy.brand_id){
                                    brand = valCopy.brand_name;
                                }
                            })
                            let totalNum = 0;
                            let typeName = value.name.slice(0,4);
                            let discountArea  = {"name":brand,"id":value.id,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"activeName":'',"totalNum":0,"sons":[]};
                            let discountArea1 = {"name":typeName,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":0,"child":[],"id":value.id};
                            discountArea1.child.push(value);
                            discountArea1.totalNum += 1;
                            discountArea.totalNum += 1;
                            discountArea.sons.push(discountArea1);
                            this.form.editDiscountedAreas.push(discountArea);
                        }else{//有这个品牌
                            let brandIndex = idArry.indexOf(value.id); //品牌index
                            let typeArry = []; //当前品牌下型号的数组
                            this.form.editDiscountedAreas[brandIndex].sons.forEach((val1,index1)=>{ //获取当前品牌的型号
                                if(val1.id){
                                    typeArry.push(val1.name);
                                }else{
                                    typeArry.push('null');
                                }
                            })
                            let typeName = value.name.slice(0,4);
                            if(typeArry.indexOf(typeName) == -1){ //没有这个型号
                                let totalNum = 0;
                                let discountArea1 = {"name":typeName,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":0,"child":[],"id":value.id};
                                discountArea1.child.push(value);
                                discountArea1.totalNum += 1;
                                this.form.editDiscountedAreas[brandIndex].sons.push(discountArea1);
                                this.form.editDiscountedAreas[brandIndex].totalNum = this.form.editDiscountedAreas[brandIndex].totalNum + 1;
                            }else{ //有这个型号
                                let typeIndex = typeArry.indexOf(typeName); //型号的index
                                this.form.editDiscountedAreas[brandIndex].sons[typeIndex].child.push(value);
                                this.form.editDiscountedAreas[brandIndex].sons[typeIndex].totalNum += 1;
                                this.form.editDiscountedAreas[brandIndex].totalNum += 1;
                            }
                        }
                    }
                });

                let tabsArry = [];
                let sonsArry = [];
                this.form.discounts.forEach((value,index)=>{
                    if(value.name){
                        tabsArry.push(value.name);

                        if(value.sons.length == 0){
                            this.form.discounts.splice(index,1,{})
                        }

                        if(this.form.discounts.length == 0){
                            this.form.discountAreaShow = false;
                        }
                    }
                });
                let tabIndex = tabsArry.indexOf(this.form.activeName);
                this.form.discounts[tabIndex].sons.forEach((val,sonsIndex)=>{
                    if(val.id && val.checkedShop.length != 0){
                        if(val.checkAll == true){ //删除所选部分
                        this.form.discounts[tabIndex].totalNum = this.form.discounts[tabIndex].totalNum - this.form.discounts[tabIndex].sons[sonsIndex].totalNum;
                        this.form.discounts[tabIndex].sons.splice(sonsIndex,1,{});
                    }else{
                        let checkIndex = [];
                        for (i of this.form.discounts[tabIndex].sons[sonsIndex].child){
                            checkIndex.push(i.name)
                        }
                        val.checkedShop.forEach((value1,index1)=>{
                            this.form.discounts[tabIndex].sons[sonsIndex].child.splice(checkIndex.indexOf(value1),1,{})
                            this.form.discounts[tabIndex].sons[sonsIndex].totalNum = this.form.discounts[tabIndex].sons[sonsIndex].totalNum - 1;
                            this.form.discounts[tabIndex].totalNum -= 1
                            if(this.form.discounts[tabIndex].sons[sonsIndex].child.filter(n=>n.id).length == 0){
                                this.form.discounts[tabIndex].sons.splice(sonsIndex,1,{});
                            }
                        });
                        val.checkedShop = [];
                    }
                    }
                });

                this.form.discounts.forEach((valueDiscounted,indexDiscounted)=>{ //去除复选框不确定表现
                    if(valueDiscounted.totalNum != 0){
                        valueDiscounted.sons.forEach((valueDiscounted1,indexDiscounted1)=>{
                            if(valueDiscounted1.id){
                                valueDiscounted1.isIndeterminate = false;
                            }
                        })
                    }
                })
                let NullArry  = this.form.discounts.filter((d) =>{ //判断设置折扣区域是否为空
                    return d.totalNum != 0
                }).length;
                if(NullArry == 0){
                    this.form.discountAreaShow = false;
                }
            },

这是点击删除部分按钮

            //这里省去ajax
                        if(res.result.success == true){//如果请求成功
                            self.form.editDiscountedAreas = [];
                            self.form.editDiscountedAreasCopy = [];
                            self.form.discounts = [];
                            self.form.discountArr = [];
                            for(value of res.content.data){ //获取未设置折扣区域
                                let discountArea  = {"name":value.brand_name,"id":value.brand_id,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"activeName":Object.keys(value.group)[0],"totalNum":self.getTotalNum(value.group),"sons":[]};
                                    Object.keys(value.group).forEach(function(key){
                                        let discountArea1 = {"name":key,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value.group[key].length,"child":[],"id":value.brand_id};
                                        for(value1 of value.group[key]){
                                            let discountArea2 = {"name":value1,"id":value.brand_id};
                                            discountArea1.child.push(discountArea2);
                                        }
                                        discountArea.sons.push(discountArea1);
                                    });
                                self.form.editDiscountedAreas.push(discountArea);
                            }
                            self.form.editDiscountedAreasCopy = res.content.data;
                            if(res.content.discount_area.length != 0){
                                self.form.discountAreaShow = true;
                                for(val of res.content.discount_area){
                                    self.form.activeName = val.discount.toString();
                                let discount = {"name":val.discount.toString(),"activeName1":Object.keys(val.group)[0],"totalNum":self.getTotalNum(val.group),"sons":[]};
                                self.form.discountArr.push(val.discount);
                                Object.keys(val.group).forEach(function(key){
                                        let discountArea1 = {"name":key,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":val.group[key].length,"child":[],"id":''};
                                        for(value1 of val.group[key]){
                                            let discountArea2 = {"name":value1.girard,"id":value1.brand_id};
                                            discountArea1.child.push(discountArea2);
                                            discountArea1.id = value1.brand_id;
                                        }
                                        discount.sons.push(discountArea1);
                                });
                                self.form.discounts.push(discount);
                            }
                            }else{
                                self.form.discountAreaShow = false;
                            }
                        }else{
                            self.$notify.error({
                                title: '错误',
                                message: res.result.errorMsg
                            });
                        }

这是页面渲染的数据格式


成功.jpg

喜极而泣.jpg

推荐阅读更多精彩内容