电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue element-ui父組件控制子組件的表單校驗操作

瀏覽:7日期:2023-01-06 18:53:50

方法一:

父組件代碼:

<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- 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父組件控制子組件的表單校驗操作

表單驗證效果已有 但驗證功能不正確。

檢查與對照官網 發現有二點如下所示

第一,在form上需要綁定對象,綁定規則

第二,在form-item上的prop需要與輸入框中的綁定對象命名相同。

改完之后,即可對輸入內容進行驗證

驗證內容格式 可參考element-ui官網

以上這篇Vue element-ui父組件控制子組件的表單校驗操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 体视显微镜_荧光生物显微镜_显微镜报价-微仪光电生命科学显微镜有限公司 | 波纹补偿器_不锈钢波纹补偿器_巩义市润达管道设备制造有限公司 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 广州展览制作|展台制作工厂|展览设计制作|展览展示制作|搭建制作公司 | 电动手术床,医用护理床,led手术无影灯-曲阜明辉医疗设备有限公司 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 防渗膜厂家|养殖防渗膜|水产养殖防渗膜-泰安佳路通工程材料有限公司 | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 冰晶石|碱性嫩黄闪蒸干燥机-有机垃圾烘干设备-草酸钙盘式干燥机-常州市宝康干燥 | 智慧旅游_智慧景区_微景通-智慧旅游景区解决方案提供商 | 密封圈_泛塞封_格莱圈-[东莞市国昊密封圈科技有限公司]专注密封圈定制生产厂家 | 语料库-提供经典范文,文案句子,常用文书,您的写作得力助手 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 真空粉体取样阀,电动楔式闸阀,电动针型阀-耐苛尔(上海)自动化仪表有限公司 | 茶楼装修设计_茶馆室内设计效果图_云臻轩茶楼装饰公司 | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | 工业CT-无锡璟能智能仪器有限公司 | 智慧消防-消防物联网系统云平台| 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 集装箱箱号识别_自重载重图像识别_铁路车号自动识别_OCR图像识别 | 真空包装机-诸城市坤泰食品机械有限公司 | 耐高温硅酸铝板-硅酸铝棉保温施工|亿欧建设工程 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | 丹尼克尔拧紧枪_自动送钉机_智能电批_柔性振动盘_螺丝供料器品牌 | 污水处理设备维修_污水处理工程改造_机械格栅_过滤设备_气浮设备_刮吸泥机_污泥浓缩罐_污水处理设备_污水处理工程-北京龙泉新禹科技有限公司 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 车牌识别道闸_停车场收费系统_人脸识别考勤机_速通门闸机_充电桩厂家_中全清茂官网 | 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 台式低速离心机-脱泡离心机-菌种摇床-常州市万丰仪器制造有限公司 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 壹作文_中小学生优秀满分作文大全 | 氢氧化钙设备_厂家-淄博工贸有限公司| 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 |