循环新增、删除层级

产品需求：

1. 新增一层，同时在下一层的下拉框里，可以选择这一层的内容
2. 删除一层，删除这一层和下拉框里对应的选择项

如图：

vue代码：

<a-form-item v-for="(item, index) in list" :label="`第${index + 1}层`">
    <a-row>
        <a-col :span="8">
          <a-input v-model="item.name" @change="onName(item.id)" />
        </a-col>
        <a-col :span="7" :offset="1">
          <a-select v-model="item.type">
            <a-select-option v-for="n in item.selsctList" :value="n.id">
              {{ n.value }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="symbol">*</a-col>
        <a-col :span="5">
          <a-input-number v-model="item.num" :min="0" :step="0.001" />
        </a-col>
        <a-col :span="2">
          <a-button
            type="primary"
            shape="circle"
            @click="delHierarchy(item.id)"
          >
            -
          </a-button>
        </a-col>
    </a-row>
 </a-form-item>
 <a-button type="primary" @click="addHierarchy"> + 添加层级 </a-button>

逻辑代码：

@Provide() list = [
    {
      id: 'hierarchy0',
      name: null,
      type: null,
      num: null,
      selsctList: [
        { id: '1', value: '成本价' },
        { id: '2', value: '代理价' },
        { id: '3', value: '标准成本' },
        { id: '4', value: '参考成本' },
      ],
    },
  ];
addHierarchy() {
    const data = lodash.last(this.list);
    const obj = this.list[this.list.length + 1];
    let list
    if (data.name !== null && !obj) {
      list = lodash.unionBy(data.selsctList, [{ id: data.id, value: data.name }])
    }
    this.list.push({
      id: lodash.uniqueId('hierarchy'),
      name: null,
      type: null,
      num: null,
      selsctList: list ? list : data.selsctList,
    });
  }
  onName(id) {
    const data = lodash.find(this.list, { id: id });
    const index = lodash.findIndex(this.list, { id: id });
    this.list.forEach((item,i)=>{
      if(index<i){
        const optionList = lodash.find(item.selsctList, { id: data.id });
          if (optionList) {
            optionList.value = data.name;
          } else {
             item.selsctList = lodash.unionBy(data.selsctList, [{ id: data.id, value: data.name }]);
          }
      }
    })
  }
  delHierarchy(id) {
    console.log(this.list);
    this.list.forEach(item => {
      item.selsctList = lodash.remove(item.selsctList,function(i){
        return id !== i.id
      })
    })
    this.list = lodash.remove(this.list,function(i){
      return i.id !== id
    })
  }
}

大功告成～～～

又是开心搬砖的一天～～～