elementui 多组件表单验证

最新推荐文章于 2025-06-06 17:31:02 发布

weixin_30788619

最新推荐文章于 2025-06-06 17:31:02 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whyue/p/7728840.html

本文介绍了一种在Vue2.0项目中使用ElementUI框架实现多组件联合表单验证的方法。具体做法是在各子组件中定义表单验证方法，并通过自定义事件将验证结果传递给父组件，最终由父组件决定是否进行数据提交。

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

最近在做管理后台，vue2.0基于elementui框架进行开发。

elementui的api中表单验证都是单个vue文件的验证。而我的保存按钮放在了父组件了，验证对象为三个子组件
我的灵机一动 想到了解决方法 哈哈哈
1.在三个子组件分别写一个方法用于验证当前表单

　　incrementTotal(){
        let formName="personSetting"
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$emit('submitType',["subject",true])
            }else{
                this.$emit('submitType',["subject",false])
                return false;
            }
        });
    }

注释：{
        1.formName="personSetting" 是表单的ref
        2.验证成功触发父组件函数并把子组件标示“teacher”和成功的状态true/false 传给父组件
    }



2.父组件

 <subject ref="subjectchildMethod"  @submitType="getSubmitType" ></subject> //引入子组件
　　//父组件中的方法
    getSubmitType(type){//获取验证子组件表单的通过状态
        if(type[0]=="subject"){
            this.teacherSubmit=type[1]
        }
    },
    savePersonData(){//提交的方法
        this.$refs.subjectchildMethod.incrementTotal();//触发子组件的验证
        if(this.teacherSubmit){//验证通过啦
            //可以提交你的数据啦
        }
    }