vue 加号增加一组控件，组内套组

一、vue 加号增加一组控件，组内套组 

1、要实现功能，每组内有子组数据，子组也可以增长多条，实现如下图：

2、代码

<template>
<el-col :span="24">
    <el-form-item label="线路车辆：" prop="mobile">
        <div class="demandOrderLine">
            <div class="container" v-for="(item,key) in formDialog.form.demandOrderLine">
                <div class="demandOrderLineRow">
                    <el-select v-model="item.FromAddress" class="dialogFormInputStyle FromAddress" >
                        <el-option v-for="item1 in formDialog.selList" :key="item1.id" :label="item1.type" :value="item1.id" placeholder="起始地">
                            <span style="float: left;font-size: 12px">{{item1.FromAddress}}</span>
                        </el-option>
                    </el-select>
                    <el-select v-model="item.ToAddress" class="dialogFormInputStyle ToAddress" >
                        <el-option v-for="item1 in formDialog.selList" :key="item1.id" :label="item1.type" :value="item1.id" placeholder="目标地">
                            <span style="float: left;font-size: 12px">{{item1.type}}</span>
                        </el-option>
                    </el-select>
                    <el-select v-model="item.FreightType" class="dialogFormInputStyle FreightType" placeholder="运费类型" >
                        <el-option v-for="item1 in formDialog.selList" :key="item1.id" :label="item1.type" :value="item1.id" placeholder="运费类型">
                            <span style="float: left;font-size: 12px">{{item1.type}}</span>
                        </el-option>
                    </el-select>
                    <el-input v-model="item.PickTransportGoodsNumber" type="text" class="dialogFormInputStyle PickTransportGoodsNumber" clearable placeholder="是否加点提货数量"></el-input> 
                    <div class="dmzbutton">                   
                        <i class="el-icon-plus" @click="passStreamAdd"></i>
                        <i class="el-icon-minus" v-if="key > 0" @click="passStreamReduce(key)"></i> 
                    </div>
                </div>
                <div class="demandOrderLineAssign" v-for="(assignItem,assignKey) in item.demandOrderLineAssign">
                    <div class="demandOrderLineAssignRow">
                        <el-select v-model="assignItem.CarType" class="dialogFormInputStyle CarType" placeholder="收费车型">
                            <el-option v-for="assignItem1 in formDialog.selList" :assignKey="assignItem1.id" :label="assignItem1.type" :value="assignItem1.id" placeholder="收费车型">
                                <span style="float: left;font-size: 12px">{{assignItem1.type}}</span>
                            </el-option>
                        </el-select>
                        <el-select v-model="assignItem.PickTransportGoodsType" class="dialogFormInputStyle FreightType" >
                            <el-option v-for="assignItem1 in formDialog.selList" :assignKey="assignItem1.id" :label="assignItem1.type" :value="assignItem1.id" placeholder="提货类型">
                                <span style="float: left;font-size: 12px">{{assignItem1.type}}</span>
                            </el-option>
                        </el-select>
                        <div class="dmzbutton">                   
                        <i class="el-icon-plus" @click="lineAssignAdd(key)"></i>
                        <i class="el-icon-minus" v-if="assignKey > 0" @click="lineAssignReduce(key,assignKey)"></i> 
                    </div>
                </div>
                </div>
            </div>
        </div>
    </el-form-item>
</el-col>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
//这里存放数据
    return {
        formDialog:{
            form:{
                demandOrderLine:[{FromAddress:'',ToAddress:'',FreightType:'',PickTransportGoodsNumber:'',
                demandOrderLineAssign:[{}],
            }],
                // demandOrderLineAssign:[{}],
            }
        }
    };
  },
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

//增加
passStreamAdd(){
    // alert(JSON.stringify(this.formDialog.form.demandOrderLine[0].demandOrderLineAssign));
    this.formDialog.form.demandOrderLine.push({demandOrderLineAssign:[{}]})
},
//减少
passStreamReduce(index){
    let newArr = [];
    //为一层时禁止减
    if(this.formDialog.form.demandOrderLine.length == 1){ return; }
    if(index == 0){   
        //为首
        newArr = this.formDialog.form.demandOrderLine.slice( 1,this.formDialog.form.demandOrderLine.length)
    }else if(index == this.formDialog.form.demandOrderLine.length-1){  
        //为尾
        newArr = this.formDialog.form.demandOrderLine.slice( 0,this.formDialog.form.demandOrderLine.length-1)
    }else{  
        //为中
        let arr1 = this.formDialog.form.demandOrderLine.slice( 0,index)
        let arr2 = this.formDialog.form.demandOrderLine.slice( index+1, this.formDialog.form.demandOrderLine.length)
        newArr = arr1.concat(arr2)
    }
    this.formDialog.form.demandOrderLine = [].concat(newArr);
},
//增加
lineAssignAdd(index){
    this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.push({})
},
//减少
lineAssignReduce(index,assignIndex){
    let newArr = [];
    //为一层时禁止减
    if(this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.length == 1){ return; }
    if(assignIndex == 0){   
        //为首
        newArr = this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.slice( 1,this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.length)
    }else if(assignIndex == this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.length-1){  
        //为尾
        newArr = this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.slice( 0,this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.length-1)
    }else{  
        //为中
        let arr1 = this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.slice( 0,assignIndex)
        let arr2 = this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.slice( assignIndex+1, this.formDialog.form.demandOrderLine[index].demandOrderLineAssign.length)
        newArr = arr1.concat(arr2)
    }
    this.formDialog.form.demandOrderLine[index].demandOrderLineAssign = [].concat(newArr);
},
},
beforeCreate() { }, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() { },
beforeMount() { }, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() { },
beforeUpdate() { }, //生命周期 - 更新之前
updated() { }, //生命周期 - 更新之后
beforeDestroy() { }, //生命周期 - 销毁之前
destroyed() { }, //生命周期 - 销毁完成
activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
 .testC{
    display: flex;
    flex-direction: column;
 }

 .demandOrderLine{
     width:100%;
     .container{
         width:100%;
         display:flex;
         flex-direction: column;
         /* justify-content: space-between; */
         .demandOrderLineRow
         {
            display: flex;
            flex-direction: row;
         }

         .demandOrderLineAssign{
            /* display:flex; */
            /* flex-direction: columns; */
            display:flex;
            flex-direction: column;
            .demandOrderLineAssignRow
            {
                display: flex;
                flex-direction: row;
            }
        }
         .FromAddress,.ToAddress,.FreightType,.PickTransportGoodsNumber{
            width:150px;
            cursor: pointer;
         }
        
         /* .dmztype{
            width:20%;
            cursor: pointer;
         } */
      
        
         .dmzbutton{
            
             display:flex;
             justify-content: space-around;
             align-items: center;       
             .el-icon-plus{
                margin-right: 20px;
                margin-right: 20px;
            }       
         
         }
        
     }
 }
</style>