vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。

首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码：

<template> <div class="content-body">  <el-form ref="form" :model="form" :rules="rules" label-width="120px">   <el-row :gutter="10">    <el-col :span="12" :offset="0">     <el-form-item label="套餐名称：" prop="activityName" id="activityName">      <el-input v-model="form.activityName"></el-input>     </el-form-item>    </el-col>   </el-row>   <el-row :gutter="10">    <el-col :span="12">     <el-form-item label="状态：">      <el-radio v-model="form.status" label="1">上线</el-radio>      <el-radio v-model="form.status" label="0">下线</el-radio>     </el-form-item>    </el-col>   </el-row>   <el-row :gutter="10">    <el-col :span="2" style="width:120px;">     <div class="sub-title">梯度设置：</div>    </el-col>    <el-col :span="20">      <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index">       <el-col :span="6">        <el-form-item label="商品数量:">         <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>        </el-form-item>       </el-col>       <el-col :span="6">        <el-form-item label="优惠价格:">          <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input>        </el-form-item>       </el-col>       <el-col :span="4">        <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i>          <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i>       </el-col>      </el-row>    </el-col>   </el-row>   <el-form-item size="medium" class="div-submit">    <el-button @click="resetForm('form')">取消</el-button>    <el-button type="primary" @click="submitForm('form')">提交</el-button>   </el-form-item>  </el-form> </div></template><script>/* eslint-disable */export default { data() {  return {   form: {    activityName: '',    status: '1',    productGroup: [{num:"",price:""}]   },   rules: {    activityName: [     { required: true, message: '请输入套餐名称', trigger: 'blur' }    ]   }  } }, methods: {  deleteLadder(index)  {   if(this.form.productGroup.length>1){    this.form.productGroup.splice(index,1);   }  },  addLadder()  {   this.form.productGroup.push({num:"",price:""});  },  submitForm(formName)  {   console.log("activityName...",this.form.activityName);   this.$refs[formName].validate((valid,obj) => {    if (valid) {     this.submitFormAction();    } else {     this.$message.error("验证不通过");    }   });  },  submitFormAction()  {   this.$message.success("提交成功");  },  resetForm(formName)  {   this.$refs[formName].resetFields();   this.form.productGroup = [{num:"",price:""}];  } }}</script><style>.el-form-item { margin-bottom: 20px;}</style>