如何实现element-ui校验多个表单项

项目场景：

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

---

解决方案：

官方文档

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>