项目场景：

表单内配置用户标签，可配置多个，一个标签全部项配置完毕才可新增。

---

解决方案：

官方文档

validateField支持数组，并且它的回调函数是每个元素调一次。如果想实现需求中的校验全部项是否都配置完毕就需要用到Promise.all()。

<template> <div v-for="(tagItem, index) in form.detainConfigList" :key="index" > <el-form-item :prop="'detainConfigList.' + index+'.userTags'" :rules="[{ required: true, message: '请选择用户标签', trigger: ['blur', 'change'] }]" :label="'选择用户标签'+(index+1)+'：'" > ...... <el-button v-if="index === form.detainConfigList.length-1"//仅最后一个标签可新增 class="button-box" type="primary" @click="addCardPackage(index)" > 新增 </el-button> <el-button class="button-box" type="danger" :disabled="index===0"//第一个标签禁止删除，至少要有一个标签 @click="deleteCardPackage(index)" > 删除 </el-button> </el-form-item> ...... </div> </template> <script> export default{ methods:{ async addCardPackage(index) { const { detainConfigList } = this.form; const { length } = this.form.detainConfigList; const fieldsToValidate = [`detainConfigList.${index}.userTags`, `detainConfigList.${index}.a`];//需要校验的prop数组 //条件展示 if (detainConfigList[index].a === 1) { fieldsToValidate.push(`detainConfigList.${index}.b`); } if (detainConfigList[index].a === 2) { fieldsToValidate.push(`detainConfigList.${index}.c`); } const promiseList = [];//存储promise结果 fieldsToValidate.forEach((item) => { const promiseItem = new Promise((resolve) => { this.$refs.form.validateField(item, (error) => { if (!error) { resolve(true); } else { resolve(false); } }); }); promiseList.push(promiseItem); }); const list = await Promise.all(promiseList); if (list.indexOf(false) === -1) {//不存在false,即全部通过校验 if (length < 10) { this.form.detainConfigList.push({ userTags: [], a: '', b: '', c: '', }); } else { this.$message({ message: '最多只能添加10组', type: 'warning' }); } } else { this.$message({ message: '当前标签未配置完成，不可新增', type: 'warning' }); } }, } }; </script>