vue+elementUI多表单同时提交及表单校验最新解决方案

// 组件1 <Component1 ref="ref1"></Component1>
<template>
    <div>
        <el-form ref="form1"></el-form>
    </div>
</template>
// 组件2 <Component2 ref="ref2"></Component2>
<template>
    <div>
        <el-form ref="form2"></el-form>
    </div>
</template>
// 组件3 <Component3 ref="ref3"></Component3>
<template>
    <div>
        <el-form ref="form3"></el-form>
    </div>
</template>

<Component1 ref="ref1"></Component1>
<Component2 ref="ref2"></Component2>
<Component3 ref="ref3"></Component3>
<button @click="onSave">保存</button>

<script>
...
methods: {
    onSave(){
        let formData1 = this.$refs.ref1.$refs.form1;
        let formData2 = this.$refs.ref2.$refs.form2;
        let formData3 = this.$refs.ref3.$refs.form3;
        Promise.all([formData1, formData2 ,formData3].map(this.getFormPromise)).then(res=>{
            const validateResult = res.every((item) => !!item);
               if (validateResult) {
                 // 校验通过，获取各个组件中的表单内容，提交后台    
                }else {
                    this.$message.warning('必填内容未填写');
                }
            })
    },
    getFormPromise(form) {
            return new Promise((resolve) => {
                form.validate((res) => {
                    resolve(res);
                });
            });
        },
}
</script>