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

一、页面多表单验证

  <div class="question">
    <div class="save"><el-button type="primary" size="mini" @click="saveQuestions">保存收集表</el-button></div>
    <div class="question-item" v-for="(question, qusIndex) in questionList" :key="question.questionId">
      <el-form size="mini" :model="question" :rules="rules" ref="ruleForm" label-width="30px">
        <el-form-item prop="titleName" :label="question.sort + '.'">
          <el-input v-model="question.titleName" placeholder="请输入标题" maxlength="200"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>

 // 使用Promise.all效验所有表单
 saveQuestions() {
   let formArr = this.$refs["ruleForm"];
   Promise.all(formArr.map(this.getFormPromise)).then((res) => {
     const validateResult = res.every((item) => !!item);
     if (validateResult) {
       console.log("表单都校验通过");
     } else {
       console.log("表单未校验通过");
     }
   });
 },
 // 单个表单验证
 getFormPromise(form) {
   return new Promise(function (resolve, reject) {
     form.validate((res) => {
       resolve(res);
     });
   });
 },
},

二、 多组件表单验证

<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("表单未校验通过");
    }
  });
},