要实现 el-form 表单动态增删功能，可以定义一个 formList 数组，使用 v-for 进行动态渲染。但是数组内部的每一个 el-form 表单如何验证呢？ el-form 表单验证

规则设置：在 el-form 中设置 rules，或者在 el-form-item 中设置 rules。
验证：his.$refs.formName.validate( valid => { }) ，返回的 valid 为 true 则校验成功，formName 为当前表格的 ref。 v-for 渲染出的el-form 表单验证
规则设置：只能在 el-form-item 中设置 rules。（在 el-form 中设置 rules会失败，我的提示文字就没成功）
验证：方法不变，但是循环出的 el-form 需要各自的、独一无二的 ref。我这里使用 "'infoForm'+infoForm.index" 来unique的表示 el-form，其中 infoForm.index 为当前 el-table 在 formList 中的索引，你可以使用其他的方法。

话不多说，看代码：

结构：

    <ul>
      <li v-for="(infoForm) in  infoList"
          :key="infoForm.index">
        <hr>
        <el-form :model="infoForm"
                 :ref="'infoForm'+infoForm.index">  
          <el-form-item label="描述"
                        :rules="infoRules.description"
                        prop="description">
              <el-input v-model="infoForm.description"/>
          </el-form-item>
        </el-form>
      </li>
    </ul>

核心代码
`:ref="'infoForm'+infoForm.index"` 
`:rules="infoRules.description"`

2. 数据

reportRules: {
        description: { required: true, trigger: 'blur', message: '请输入问题描述' },
      },
infoList:[
{
	description:"好心态决定女人的一生"，
	index:0, // 当前对象在数组中的索引
}
]

验证

for (let i = 0; i < this.infoList.length; i++) {
          const refStr = "infoForm" + i
          const form = this.$refs[refStr][0] // 注意 ！！！
          form.validate(valid => {
            if(valid){
              // 验证通过代码
            } else {
            this.$message.error("有必填项未填写！")
            }
          })

我将 this.$refs[refStr]打印出来后是个数组，因此要取 this.$refs[refStr][0]

question

有大佬知道为什么是个数组吗？

使用 v-for 动态渲染多个 el-form 如何进行校验

question