Vue+element 动态增加表单并进行表单验证

<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>
          </div>
</div>

data(){
	addForm:{
            name:'',
            content:'',
            moreNotifyObject:[{
              field:'',
              name:'',
              max:''
            }]
        }
}
methods:{
	addUser() {
            this.addForm.moreNotifyObject.push({
                field:'',
                name:'',
                max:'',
          })
      }
 }

表单验证：
需要注意的一点是：

普通表单验证单项依靠的是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">

感谢原博主的整理分享。
https://www.cnblogs.com/blog-zy/p/10155820.html