elementui 多组件表单验证
最近在做管理后台,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){//验证通过啦
//可以提交你的数据啦
}
}
elementui 多组件表单验证的更多相关文章
- vue elementUI之Form表单 验证
		
首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且 ...
 - vue+element-ui中的表单验证(电话等等)
		
1. 2. 3. ============================================================上代码============================ ...
 - 如何在Vue的项目里对element的表单验证进行封装
		
介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...
 - element-ui+vuex共享自定义方法进行表单验证 validator
		
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
 - vue elementui form表单验证
		
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
 - ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
		
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...
 - element-ui表单验证(电话,邮箱)
		
element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...
 - ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
		
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
 - JS组件系列——Form表单验证神器: BootstrapValidator
		
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
 
随机推荐
- 【SSH进阶之路】Hibernate映射——多对多关联映射(八)
			
上篇博文[SSH进阶之路]Hibernate映射——一对多关联映射(七),我们介绍了一对多关联映射,它是多对多关联映射的基础. 多对多映射是现实生活中最常见的映射,也是最容易理解的映射.废话少说,直接 ...
 - SQL server触发器学习记录
			
作为C#程序员,我工作内容基本就是winform,wpf,asp.net.sql接触的比较少,今天突然来了一个ticket要我修改触发器脚本....只会select*的我顿感迷茫... 需求描述:as ...
 - 【视频开发】【CUDA开发】ffmpeg Nvidia硬件加速总结
			
原文链接:https://developer.nvidia.com/ffmpeg GPU-accelerated video processing integrated into the most p ...
 - 考前最后的感叹:CSP2019 Bless All! & AFO
			
因为没有退路,所以勇往直前. ----来自高二老年选手小蒟蒻XY Upd:凉凉了,你们都稳了...我看来是超不过准考证号了qwq[大哭] Upd:来自联考txdy的神仙gcz Upd:久远的回忆:会不 ...
 - Mybatis中实体类属性与数据库列表间映射方法介绍
			
这篇文章主要介绍了Mybatis中实体类属性与数据列表间映射方法介绍,一共四种方法方法,供大家参考. Mybatis不像Hibernate中那么自动化,通过@Co ...
 - 爬虫请求库之requests库
			
一.介绍 介绍:使用requests可以模拟浏览器的请求,比之前的urllib库使用更加方便 注意:requests库发送请求将网页内容下载下来之后,并不会执行js代码,这需要我们自己分析目标站点然后 ...
 - 18年10月     python 中出现 ValueError: need more than 1 value to unpack 解决办法  (笨办法)
			
eg:a,b = argv :错误,我的理解也许不正确,但是能解决办法 a,b= argv,argv 正确 :经测试不会出现错误. ------------------------------ ...
 - 2.NioEventLoop的创建
			
NioEventLoop的创建 NioEventLoop是netty及其重要的组成部件,它的首要职责就是为注册在它上的channels服务,发现这些channels上发生的新连接.读写等I/O事件,然 ...
 - 深度自适应增量学习(Incremental Learning Through Deep Adaptation)
			
深度自适应增量学习(Incremental Learning Through Deep Adaptation) 2018-05-25 18:56:00 木呆呆瓶子 阅读数 10564 收藏 更多 分 ...
 - 在windows中使用PuTTy上传下载文件和目录
			
打开windows的cmd,使用cd命令切换到PuTTy安装目录 C:\Users\NUC>cd C:\Program Files\PuTTY 在cmd中使用pscp命令上传下载文件 windo ...