Vue element-ui父组件控制子组件的表单校验操作


Posted in Javascript onJuly 17, 2020

方法一:

父组件代码:

<template>
<div>
	<child-form  ref="childRules" :addForm="addForm" >  </child-form>
	
	 <el-button @click="saveForm()" size='medium'>保 存</el-button>
	 
</div>
</template>
<script>
	import childForm from './childForm'
	export default {
		data(){
			return {
					addForm: { 
				   name:"",
			     desc: ""
			    },
				}
   		},
   		//组件引用
		  components: { 
		   childForm 
		  },
		  methods:{
				 //保存校验
			   saveForm() { 
			    let flag = this.$refs['childRules'].validateForm(); 
			    if(flag){
			     console.log(this.addForm);
			
			
			    }else{
			      this.$message.error('保全信息不完整,请继续填写完整');
			    } 
			   },
			}
	}
</script>
<style></style>

//子组件代码

<!-- -->
<template>
 <div class="form-content">
  <el-form :model="addForm" :inline="true"  :rules="formRules" ref="ruleForm"
   size='mini' label-width="120px" class="form-mini">
   <el-form-item label="名字" prop='name'>
   		<el-input v-model="addForm.name" ></el-input>
   </el-form-item> 
  </el-form>
 </div>
</template>

<script> 
 export default {
  name: '', 
  props: {
   addForm: { 
    type: Object,
    default: function () {
     return { 
     } 
    }
   } 
  },
  data() {
   //这里存放数据
   return { 
    formRules: {
     name: [{
      required: true,
      message: '请输入',
      trigger: 'blur'
     }] 
    }, 
   };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //过滤器
  filters: {},
  //方法集合
  methods: { 
   //子组件校验,传递到父组件
   validateForm () {
    let flag = null
    this.$refs['ruleForm'].validate(valid => {
     if (valid) {
      flag = true
     } else {
      flag = false
     }
    })
    return flag
   }
  } 
 }

</script>
<style lang='less'> 
</style>

补充知识:vue element-ui表单验证无效解决方案

在写页面的时候用到的element-ui库中的表单验证

出现如下问题

Vue element-ui父组件控制子组件的表单校验操作

表单验证效果已有 但验证功能不正确。

检查与对照官网 发现有二点如下所示

Vue element-ui父组件控制子组件的表单校验操作

第一,在form上需要绑定对象,绑定规则

第二,在form-item上的prop需要与输入框中的绑定对象命名相同。

改完之后,即可对输入内容进行验证

验证内容格式 可参考element-ui官网

以上这篇Vue element-ui父组件控制子组件的表单校验操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
js返回顶部实例分享
Dec 21 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
You might like
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php接口隔离原则实例分析
2019/11/11 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
Python实现句子翻译功能
2017/11/14 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python 的AES加密与解密实现
2019/07/09 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
劳资协议书范本
2014/04/23 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2016小学新学期寄语
2015/12/04 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python