vue el-form多个表单同时验证必填项

一个页面上多个表单需要在一个操作情况下同时验证必填项是否填写完整

html

<template>
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" >
            <el-form-item label="订单号:" v-if="editorShow" class="el-form-pad">
    			<template slot-scope="scope">
    				<el-button type="text" @click="onEdit(scope.row, scope.$index)"> {{formData.orderId}} </el-button>
    			</template>
    		</el-form-item>
        </el-form>
        
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData2">
            <el-form-item label="订单类型:" prop="orderTypeValue">
				<el-select v-model="formData.orderTypeValue" placeholder="请选择" size="mini" :disabled="disableIsShow">
					<el-option v-for="item in orderTypeList" :key="item.orderTypeValue" :label="item.orderTypeName" :value="item.orderTypeValue"></el-option>
				</el-select>
			</el-form-item>
        </ell-form>
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData3">
            <el-form-item label="收货人:" prop="userName"> 
				<el-input v-model="formData.userName" size="mini" class="box-width" :disabled="disableIsShow" />
			</el-form-item>
        </el-form>
        
        <button class="mini-search-btn" @click="handleSave('formData')"> 保存订单 </button>
        
    </template>

js

采用封装表单验证函数

<script>
        export default {
            data() {
                return {
                    formData: {
        				orderTypeValue: '', // 订单类型
        				distributionId: '', // 配送方式
        				invoiceType: '', // 发票类型
        				payWay: '', // 支付方式
        				isInvoice: 0, // 是否开票
        				provinceId: "", // 省份id
        				cityId: "", // 城市id
        				districtId: "", // 区id
        				importOrderId: "",
        				zipCode: '', // 邮编
        			},
        			rules: { // 必填输入提示
        				payWay: [ {required: true, message: '请选择支付方式', trigger: 'change' } ],
        				distributionId: [ {required: true, message: '请选择配送方式', trigger: 'change' } ],
        				orderTypeValue: [ { required: true, message: "请选择订单类型", trigger: "change" } ],
        				userName: [ { required: true, message: "请输入收货人名字", trigger: "blur" } ],
        				provinceId: [ { required: true, message: "请选择地区", trigger: "change" } ],
        				address: [ 	{ required: true,message: "请输入街道地址",trigger: "blur"} ],
        				mobile: [ { required: true,message: "请输入手机号码",trigger: "blur"}, { validator: validatePhone } ],
        			},
                }
            },
            methods: { 
                // 对于四个form进行promise封装进行同时验证
                handleSave(formData) { // 保存操作
        			let formArr=['formData1','formData2','formData3']//三个form表单的ref
        			var resultArr=[] //用来接受返回结果的数组
        			var _self=this
        			function checkForm(formName) { //封装验证表单的函数
        				var result = new Promise(function(resolve, reject) {
        					_self.$refs[formName].validate((valid) => {
        						if (valid) {
        							resolve();
        						} else { reject() }
        					})
        				})
        				resultArr.push(result) //push 得到promise的结果
        			}
        			formArr.forEach(item => { //根据表单的ref校验
        					checkForm(item)
        			})
        			Promise.all(resultArr).then(values => {
        					this.submitForm() // 此时必填完成，做保存后的业务操作
        			}).catch( _ => {
        				console.log('err')
        			})
        		},
            }
        }
    </script>