使用promise.all()实现多表单验证 以及 循环表单验证

多表单验证
需求：多个标签页中的form表单 点击确定按钮 需要全部验证通过方可提交
使用的element ui表单验证方法

// submitForm() 确定方法
submitForm() {
        let form1 = new Promise((resolve, reject) => {
            this.$refs['form1'].validate(valid => {
                if (valid) {
                    resolve()
                } else {
                	// 返回验证失败的表单名称
                   reject('form1') 
                }
            })
        })
        let form2 = new Promise((resolve, reject) => {
            this.$refs['form2'].validate(valid => {
                if (valid) {
                    resolve()
                } else {
                   reject('form2') 
                }
            })
        })
        let form3 = new Promise((resolve, reject) => {
            this.$refs['form3'].validate(valid => {
                if (valid) {
                    resolve()
                } else {
                   reject('form3') 
                }
            })
        })
        Promise.all([form1, form2, form3]).then((res)=>{
            //验证成功 向提交数据
        }).catch((err) => {
        	// this.activeName 当前标签页name
        	// 如果验证失败的表单 不在当前标签页 会有以下提示
            if (err === 'form1' && this.activeName != 'basic') {
                 this.$message({
                    message: '基本信息未填写完整，请前往查看',
                    type: 'error'
                });
            } else if (err === 'form2' && this.activeName != 'user') {
                 this.$message({
                    message: '人员信息未填写完整，请前往查看',
                    type: 'error'
                });
            } else if (err === 'form3' && this.activeName != 'stage') {
                 this.$message({
                    message: '阶段信息未填写完整，请前往查看',
                    type: 'error'
                });
            }
        })
    },

循环表单验证
如下图所示 动态添加form-item组

// 举个简单的例子
<el-form ref="form3" :model="form3" label-width="120px">
	<template v-for="(item,index) in form3.schedulingList">
		<el-form-item label="人员成本(元)" :prop="`schedulingList.${index}.cost`" :rules="rules.userListCost" >
           	<el-input v-model="item.cost" placeholder="请输入人员成本" :disabled="viewFlag" />
        </el-form-item>
		<el-form-item label="阶段" :prop="`schedulingList.${index}.stage`" :rules="rules.schedulingListStage">
	        <el-input v-model="item.stage" placeholder="请输入阶段" :disabled="viewFlag" />
	    </el-form-item>
    <template>
</el-form>

form3:{
	schedulingList: [
		{
			cost: '',
			stage: ''
		}
	]
},
rules: {
	// 人员成本校验
	userListCost: [
       { required: true, message: "人员成本不能为空", trigger: "blur" }
  	],	
	// 阶段信息校验
    schedulingListStage: [
       { required: true, message: "阶段信息不能为空", trigger: "blur" }
    ]
}