vue，elementUI多表单同时提交，表单校验解决方案

垃圾侠2024-03-08 12:58

问：

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

答：

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

html 复制代码

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

父级组件引入三个子组件

html 复制代码

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

保存方法实现

html 复制代码

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