动态增减表单详解

不知道小伙伴们有没有做过类似的功能，效果图如下

看到这个需求的一瞬间小编瞬间陷入了思维逻辑的坑里，想着垃圾桶旁边的提示信息直接放一个插值表达式，插值表达式直接放入，上边输入框v-model绑定的值不就好了。结果做好了增加第一个表单的时候功能是没问题的，相信已经有小伙伴发现了问题所在，增加第二个表单的时候你就会发现第一个表单垃圾桶旁边的提示信息跟第二个增加的表单提示信息是一样的，而且当你上边输入框清空内有内容的时候你会惊奇的发现，两个表单垃圾桶旁边的提示信息都是空的，为什么呢？这是因为插值表达式内填的就是"添加规格"输入框双向绑定的值。好了，接下来就是见证奇迹的时刻，代码奉上:

1. 首先我们需要先定义一个空数组，用来保存动态增加的表单（切记一定要是空数组，否则点添加的时候就会生成两个表单）

data(){
    return{
         domains: [],
    }
}

2.接下来就是样式代码，用v-for循环刚刚定义的空数组，v-for的key值我们会用当前时间戳来代替

      <el-form-item label="添加规格">
            <el-row>
              <el-col :span="7" style="padding-right:1%;">
                <el-input v-model="form.appUrl" style="margin-bottom: 5%;"></el-input>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" @click="addform">添加</el-button>
              </el-col>
            </el-row>
            <!-- 动态表单 -->
            <div v-for="item in domains" :key="item.key">
              <el-row>
                <el-col :span="1">
                  <i class="el-icon-delete-solid" style="color:red;" @click.prevent="removeDomain(item)"></i>
                  <span>{{item.formName}}</span>
                </el-col>
                <el-col :span="7">
                  <el-form :model="form" ref="form" label-width="90px" style="width:83%; margin-bottom: 8%;">
                    <el-form-item label="库存" style="margin-bottom: 2%;">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="单位" style="margin-bottom: 2%;">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="单价" style="margin-bottom: 2%;">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="奖励汗水粒" style="margin-bottom: 2%;">
                      <el-input></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>

          </el-form-item>

3.逻辑代码

methods：{
     //动态增加表单项
    addform() {
      this.domains.push({
        formName: this.form.appUrl, //这里就是垃圾桶旁边的提示文字
        key: Date.now()
      })
    },
    //移除表单
    removeDomain(item) {
      var index = this.domains.indexOf(item)
      if (index !== -1) {
        this.domains.splice(index, 1)
      }
    },
}