el-form-循环表单验证

对于循环表单，需要在表单中使用 v-for 循环渲染表单项。在验证表单时，需要对每个表单项进行单独的验证。

可以通过 v-model 绑定表单数据，并在每个表单项上设置 ref 属性，以便在验证时获取表单项的值。

在提交表单时，可以遍历所有表单项进行验证，如果有表单项验证不通过，则提示用户并阻止表单提交。

以下是一个示例代码：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
      <el-input v-model="form[item.prop]" :ref="item.prop"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 表单数据
      },
      formItems: [
        // 表单项配置
      ],
      rules: {
        // 表单验证规则
      }
    }
  },
  methods: {
    submitForm() {
      // 遍历表单项进行验证
      for (let i = 0; i < this.formItems.length; i++) {
        const item = this.formItems[i];
        const value = this.$refs[item.prop][0].value;
        const result = this.$refs.form.validateField(item.prop);
        if (result !== true) {
          this.$message.error(`${item.label}验证不通过`);
          return;
        }
      }
      // 表单验证通过，提交表单
      // ...
    }
  }
}
</script>