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>