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

2024-02-14 12:57:05

方法一：

父组件代码：

<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库中的表单验证

出现如下问题

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

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

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

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

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

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

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

快速了解Vue父子组件传值以及父调子方法、子调父方法

稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child f
vue父组件触发事件改变子组件的值的方法实例详解

父组件向子组件通信业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-
vue 父组件通过$refs获取子组件的值和方法详解

前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式今天我们要看的是父组件如何直接调
vue表单验证你真的会了吗？vue表单验证（form）validate

前言很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新效果图 1.原理解释考虑我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播为什么要用广播
Vue element-ui父组件控制子组件的表单校验操作

方法一: 父组件代码: <template> <div> <child-form ref="childRules" :addForm="addForm" > </child-form> <el-button @click="saveForm()" size='medium'>保存</el-button> </div> </template> <
vue+element 模态框表格形式的可编辑表单实现

要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑 <el-dialog title="营销单详情" width="920px" @close="isEdit = false" class="dialog dialogAdd" custom-class="custom-dialog" :visible.sync="dialo
vue中使用vee-validator完成表单校验方案

前言由于大部分移动端的组件库都不提供表单校验,因此需要自己封装.目前,使用较多的是async-validator和vee-validator.其中,elementUI组件库提供的表单验证也是基于async-validator,vee-validator是一种基于vue模板的轻量级校验框架.可以根据项目的需求,自行选择合适的方案.本文主要讨论的是vee-validator校验方案. 表单校验的封装在vue项目中,表单校验是每个前端开发人员都避免不了的需求.校验的好处可以避免无用的 http 请
Vue Element UI自定义描述列表组件

本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下效果图写在前面写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行
vue里面父组件修改子组件样式的方法

在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式
vue实现父组件获取子组件的方法或属性值详解

目录父组件获取子组件方法或属性值这里主要使用了vue的$ref 父组件获取子组件中的变量案例一:点击父组件的按钮,操作子组件显示案列二:获取子组件data中的变量父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法目标:我需要实现一个在父组件
Vue中父组件向子组件通信的方法

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s
vue 使用ref 让父组件调用子组件的方法

父级组件上的三个按钮可以调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu
vue父组件向子组件(props)传递数据的方法

vue页面结构在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(
Vue父组件调用子组件事件方法

Vue父组件向子组件传递事件/调用事件不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法方法二:父组件调用子组件方法子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

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

相关推荐

随机推荐