动态表单的批量新增功能的实现

引言

在日常的项目开发中，我们经常会开发表单的新增功能，实现普通表单的解决方案，我们通常会给表单中每一个对应的字段绑定v-model值，然后点击新增按钮将我们绑定后的一个object格式的变量传给后端，进行数据库的插入。例如：

我们会在data中储存一个变量，用来存放每一个字段对应的v-model值

form:{
        name:"",
        region:"",
        startTime:"",
        endTime:"",
        delivery:""
    }

 开发场景

我们以elementUI为例，要实现这样一个功能，点击新增域名，会在页面上新增一个域名对应的字段输入框，点击删除会删除对应的输入框

 解决方案

 这时，我们就不能单纯的去一对一的进行v-model的绑定，而是需要通过v-for进行遍历，通过item和index去进行动态绑定，

html：

  <el-form-item
    v-for="(item, index) in form.list"
    :label="'域名' + index"
    :key="index"
  >
    <el-input v-model="item.value"></el-input>
<el-button @click.prevent="removeitem(index)">删除</el-button>
  </el-form-item>

data中的值：

form :{
        mailbox: "",
        list: [
            { value: "" },
            { value: "" },
            { value: "" },
            { value: "" }
        ]
    }

我们通过v-for去遍历form.list，这样我们拿到的每个item就是list中的每一项，然后给每个输入框绑定item.value,我们点击新增，会像list中push一个新的{value:""}这种格式的变量，就能实现动态新增，删除我们去通过传递给我们的index去寻找对应的输入输入框，然后删除数组的对应项

新增 

add() {
        this.form.list.push({
          value: '',
        });

删除

remove(index) {
          this.form.list.splice(index, 1)
      },