在element-ui中使用循环form表单实现的页面，如何进行提交前的数据校验？
可以使用this.$refs.formName.validate(valid => {})来对循环生成的form表单进行验证，示例如下：

<template>
  <div>
    <el-form
      v-for="(item, index) in formItems"
      :key="index"
      :ref="'form' + index"
      :model="item"
      :rules="rules"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="item.name"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
    <el-button @click="validateForms">验证表单</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      formItems: [
        // 初始化表单数据
        { name: "11" },
        { name: "22" },
        { name: "33" },
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    validateForms() {
      let valid = true;
      this.formItems.forEach((item, index) => {
        const formName = "form" + index;
        this.$refs[formName][0].validate((isValid) => {
          valid = valid && isValid;
        });
      });
      if (valid) {
        console.log("所有表单验证通过");
      } else {
        console.log("有表单验证未通过");
      }
    },
  },
};
</script>

image.png

image.png