幽灵资源网 Design By www.bzswh.com
方法一:
父组件代码:
<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父组件控制子组件的表单校验操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...