Promise.all 多表单验证、多组件表单验证（element-ui）

一、页面多表单验证

<div class="edit-item" v-for="(option, index) in questions.optionList" :key="option.optionName">
  <el-form size="mini" :model="option" :rules="rules" ref="ruleForm">
     <el-form-item prop="optionValue">
        .....
      </el-form-item>
   </el-form>
</div>

getFormPromise(form) {
  return new Promise((resolve) => {
    form.validate((res) => {
      resolve(res);
    });
  });
},
async saveQuestions(questions) {
  const form1 = this.$refs.mustRewardRef.$refs.ruleForm;   // 表单1
  const form2= this.$refs.extraRewardRef.$refs.ruleForm;   // 表单2
  const form2= this.$refs.extraRewardRef.$refs.ruleForm;   // 表单3
原文链接：https://blog.csdn.net/jgujgu/article/details/126391740
  Promise.all([form1,form2,form3].map(this.getFormPromise)).then((res) => {
    const validateResult = res.every((item) => !!item);
    if (validateResult) {
      console.log("表单都校验通过");
      this.submitQuestion(questions);
    } else {
      console.log("表单未校验通过");
    }
  });
},

二、 多组件表单验证

<div class="questionsItem" v-for="(questions, itemIndex) in formInline.itemList" :key="itemIndex">
  <option-item
    v-if="questions.isDisplay"
    :mode="mode"
    ref="optionItemRef"
    @nextItemId="getNextItemId"
    :form="answerForm[itemIndex]"
    optionKey="id"
    :questions="questions"
    :controlType="questions.controlType"
  />
</div>

getFormPromise(form) {
  return new Promise((resolve) => {
    form.$refs["ruleForm"].validate((res) => {
      resolve(res);
    });
  });
},
validateQuestion() {
 //  formArr  个组件表单数组
  let formArr = this.$refs.optionItemRef;
  Promise.all(formArr.map(this.getFormPromise)).then((res) => {
    const validateResult = res.every((item) => !!item);
    if (validateResult) {
      console.log("表单都校验通过");
      this.submitQuestion();
    } else {
      console.log("表单未校验通过");
    }
  });
},