四时宝库

我用的是：vue + element ui 直接代码。

<template>
  <el-main>
    <el-col :span="24" class="warp-main" v-loading="">
      <el-form :inline="true" class="demo-form-inline" v-for="(item, i) in FormArr" :key="i">
        <el-form-item label="样例">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
        <el-button type="primary" @click="Delete(item.index)">删除</el-button>
      </el-form>
      <el-button type="primary" @click="AddForm">增加更多</el-button>
    </el-col>
  </el-main>
</template>

逻辑

<script>
export default {
  data () {
    return {
      FormArr: [
        {
          index: 0,
          value: ''
        }
      ]
    }
  },
  methods: {
    AddForm () {
      //this.xzqhList = this.handleTree(re.data, 'id', 'parentId', 'children', '0')
      this.FormArr.push({
        index: this.FormArr.length,
        value: ''
      })
      console.log(this.FormArr)
    },
    Delete (index) {
      this.FormArr.splice(index, 1)
      for (let i in this.FormArr) {
        this.FormArr[i].index = i
      }
    }
  }
}
</script>

注释：

1.通过对数组的操作，进行添加和删除；

2.这里应注意index这个索引，用于删除时，知道删的是哪一个值；

3.删完对应的值，要对数组的index这个索引重组，否则再删除时会出错；