vue+ElementUI动态生成新表单并添加验证

需求，表中默认有一个with携带参数表，点击添加可以新增一条with数据。并可以动态的增加和删除，利用vue绑定数组对象并循环输出列表。

期初示意图：

点击添加更多携带参数时，新增数据集，如下图所示：

elementUI官网有对单表单的添加，现在对多表单的添加，考虑的实现方式是，先写死一个必须的表单，需要新增表单的放在一个div里，在div中使用v-for生成，达到同时增加的效果。

代码如下：

<!-- 已存在的 -->
          <el-form-item  label="field" prop="field"  :rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="field" placeholder="请输入field"></el-input>
              </el-form-item>
              <el-form-item  label="name" prop="name" :rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="name" placeholder="请输入name"></el-input>
              </el-form-item>
              <el-form-item  label="max" prop="max":rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="max" placeholder="请输入max"></el-input>
        </el-form-item>  

          <!-- 动态生成 -->
          <div class="moreRules">
          <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key" >
              <el-form-item  label="field" :prop="'moreNotifyObject.' + index +'.field'"  :rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="item.field" placeholder="请输入field"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="name" :prop="'moreNotifyObject.'+ index +'.name'":rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="item.name" placeholder="请输入name"  class="el-select_box"></el-input>
              </el-form-item>
              <el-form-item  label="max" :prop="'moreNotifyObject.'+ index +'.max'":rules="[{required: true, message: '请完善信息'}]">
              <el-input v-model="item.max" placeholder="请输入max"  class="el-select_box"></el-input>
              </el-form-item>
              <el-button @click="deleteRules(item, index)" >删除</el-button>
          </div>
          </div>

需要注意的一点是：

普通表单验证单项依靠的是prop..而动态生成的表单要用:prop

书写的语法是:prop="'moreNotifyObject.' + index +'.notifyobject'"，moreNotifyObject是v-for绑定的数组，index是索引，notifyobject是表单绑定的v-model的名称，然后用.把他们链接起来。

所以总结起来的语法就是:prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'"

还有一个需要注意就是v-for的写法，要将表单的model名写进去

<div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key">

 数据代码如下：

addForm:{
            name:'',
            content:'',
            moreNotifyObject:[{
              field:'',
              name:'',
              max:''
            }]
        },

数据初始化：

// 数据初始化
      initData(){
            this.addForm.moreNotifyObject = []
      },

点击新增按钮时代码：

 addUser() {
            this.addForm.moreNotifyObject.push({
                field:'',
                name:'',
                max:'',
          })
      },

删除行：

      deleteRules(item, index) {
            this.index = this.addForm.moreNotifyObject.indexOf(item)
            if (index !== -1) {
                this.addForm.moreNotifyObject.splice(index, 1)
            }
      },

参考文章：https://blog.csdn.net/weixin_41041379/article/details/81908788

转载于:https://www.cnblogs.com/blog-zy/p/10155820.html