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()）