Vue element-ui父组件控制子组件的表单校验操作
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了Vue element-ui父组件控制子组件的表单校验操作,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
方法一:
父组件代码:
<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: "" }, } }, //组件引用 ponents: { 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概念 puted: {}, //监控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父组件控制子组件的表单校验操作就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程