1.需求

要求在提交申请时校验每个地址使用信息的必填项是否填写完整

2.最终效果

3.具体操作

<el-dialog v-model="data.applyVisible" title="申请地址" center destroy-on-close>
      <el-button type="primary" @click="handleTabsAdd">新增地址使用信息</el-button>
      <el-tabs v-model="data.activeName" type="card"
        :closable="data.applyRegisteredAddressParams.length > 1"
        @tab-click="handleClick" @tab-remove="handleTabsRemove" @tab-add="handleTabsAdd" >
        <el-tab-pane :label="'地址使用信息' + (i + 1)" v-for="(it, i) in data.applyRegisteredAddressParams" :name="i" :key="i" >
        <el-form label-width="110px" ref="formRefs" :model="it">
            <el-form-item label="地址使用人姓名:" prop="userName"
              :rules="[{ required: true, message: '地址使用人姓名不能为空', trigger: 'blur' }]" >
              <el-input v-model="it.userName" class="w200" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone"
              :rules="[{ required: true, message: '联系电话不能为空', trigger: 'blur' }]" >
              <el-input v-model="it.phone" class="w200" placeholder="请输入" ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="cancelApply">取消</el-button>
        <el-button type="primary" @click="submitApply()">提交申请</el-button>
      </template>
</el-dialog>

const formRefs = ref(); // 表单ref

// 提交地址申请
const submitApply = () => {
  let promises = formRefs.value.map((item,index) => new Promise((resolve, reject) => {
    item.validate((valid, fields) => {
      if (!valid){ 
        reject(index);
      } else {
        resolve();
      }
    });
  }));

  Promise.all(promises).then(() => {
    saveContract('save').then(() => { // 申请地址
        applicationAddress().then((res) => {
          proxy.$message.success('申请成功');
        });
      });
    }).catch((ind) => {
      console.log("ind",ind);
      data.activeName = ind?ind:String(ind)
      ElMessage.error("请填写完整！")
    });
};

4.重点说明

（1）如何实现循环添加校验的

data.applyRegisteredAddressParams作为循环的数组，it作为具体数组元素的对象；需要在el-form标签上添加ref="formRefs"用来获取节点，model属性一定是绑定数组的元素（it）

（2）如何实现循环校验的

重点在于Promise.all()这个方法，Promise.all() 是一个 JavaScript 的内置函数，它接受一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 会在所有给定的 Promise 都成功完成时成功完成，或者在任何一个 Promise 失败时立即失败。

也就是我每一个用户都是一个Promise，每个Promise要么进入resolve（）成功方法或者进入reject（）失败方法。而Promise.all()这个方法要求所有的Promise都要进入成功方法后才会进入Promise.all()的成功方法（也就是进入then()），否则就会进入失败的方法（也就是catch()）