vue，elementUI多表单同时提交，表单校验解决方案_vue多个表单同时提交-优快云博客

博客围绕一个需分三步填写三个独立组件表单并最后同时提交的页面，探讨表单必填项校验问题。给出的解决方法包括为每个组件和组件内的el - form设置ref和rules，在父级组件引入子组件，以及实现保存方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问：

假设有一个页面，需要分三步填写三个表单，且每个表单位于独立的组件中，然后最后保存同时提交，如何进行表单必填项校验？

答：

1. 为每个组件设置ref，值分别为ref1，ref2，ref3，再为各个组件中的el-form设置独立的ref和rules，三个表单的ref值分别为form1，form2，form3.

// 组件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>

2. 父级组件引入三个子组件

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

3. 保存方法实现

<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>