在element-ui中使用循環(huán)form表單實(shí)現(xiàn)的頁面，如何進(jìn)行提交前的數(shù)據(jù)校驗(yàn)？
可以使用this.$refs.formName.validate(valid => {})來對循環(huán)生成的form表單進(jìn)行驗(yàn)證，示例如下：

<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>
      <!-- 其他表單項(xiàng) -->
    </el-form>
    <el-button @click="validateForms">驗(yàn)證表單</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      formItems: [
        // 初始化表單數(shù)據(jù)
        { 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("所有表單驗(yàn)證通過");
      } else {
        console.log("有表單驗(yàn)證未通過");
      }
    },
  },
};
</script>

image.png

image.png