element-ui 表单渲染v-if组件,验证报错
问题描述
使用elementui
的form表单组件,如果其中几个表单项使用了v-if进行UI切换,并且默认v-if="false"不可见,切换的元素又是必填项时
,那么在验证的时候,就会出现很奇怪的bug。
原因:
elementui
在对form表单中带有prop属性的子组件进行校验规则绑定
时,是在vue声明周期mounted
完成的。而v-if用来切换的元素是会被销毁的,导致了v-if内的表单项,由于在mounted时期没有进行渲染,所以规则也没有绑定上。
那么就对el-form-item
使用rules来进行动态绑定`,一旦切换就会绑定上这个rules。
另一个坑,自定义的验证方法中,比如
validLandlordName(rule, value, callback) {}
,有时会出现value这个值取不到为空。那么就直接获取你输入的属性值this.houseInfo.landlord.landlordName
来进行验证,不要再对value进行判断了。
<el-form ref="form" :rules="rules" :model="houseInfo" inline size="mini" label-width="150px"><el-row><el-col><el-form-item label="所属社区" label-width="150px" prop="communityId"><el-select v-model.trim="houseInfo.communityId" placeholder="所属社区" :disabled="true"><el-option v-for="item in communityList" :value="item.communityId" :label="item.communityName" :key="item.communityId"></el-option></el-select></el-form-item></el-col></el-row><!-- houseInfo.houseType 值为4--><el-row v-if="houseInfo.houseStatus == 4"><el-col><el-form-item label="所属楼栋/单元" prop="buildingId" label-width="150px"><el-cascader placeholder="所属楼栋/单元" :disabled="houseTypeDisabled" :options="deptTreeBuilding" v-model="houseInfo.selectOptions"@change="selectedBuildingChanged" :change-on-select="true" style="width:200px"></el-cascader></el-form-item></el-col></el-row><el-row><!-- 此时这个手机号码,默认是不显示的,一旦切换渲染出来,验证规则不做特殊处理就会报错--><div v-if="houseInfo.houseStatus !== 4"><el-row><el-col><el-form-item label="手机号码" prop="landlord.contactMobile" ><el-input v-model="houseInfo.landlord.contactMobile" style="width:200px" placeholder="请输入手机号码"></el-input></el-form-item></el-col></el-row></div>
</el-form>
解决办法:
v-if中的表单元素,使用动态验证规则绑定,:rule=[XXX],同时在method中自定义验证方法即可。
------ 如果文章对你有用,感谢右上角 >>>点赞 | 收藏 <<<
element-ui 表单渲染v-if组件,验证报错相关推荐
- vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- element UI 表单自定义验证,css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...
- form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
- vue开源Element UI表单设计及代码生成器
1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
- element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
- Element UI——表单验证输入的数字检测出来是string解决方案
问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
- element ui 表单验证通过后没有绿色框 求解 (已解)
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
- element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...
最新文章
- 13.QT信号槽的连接方式
- 网站优化必知的五大发文注意事项
- tableau必知必会之学做时尚的环状条形图(跑道图)
- 4.Spring Cloud Alibaba教程:Nacos配置管理
- jenkins无法安装插件问题
- 消除软硬件鸿沟,芯客网完美支持智能硬件在移动互联时代的爆发
- C++总结笔记(七)—— 运算符重载
- redis配置主从没效果_跟我一起学Redis之加个哨兵让主从复制更加高可用
- CentOS 5.8 Zimbra邮件系统安装与配置
- bzoj1051: [HAOI2006]受欢迎的牛(tarjan强连通分量)
- 贺利坚老师汇编课程27笔记(二):loop和[bx]访问连续内存单元
- LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话(简单易懂)
- 【LeetCode】【数组】题号:*189,旋转数组
- 北京54、西安80、CGCS2000、WGS84坐标系及区别
- 从一个插座面板开始说故事
- 现场总线CANopen设计与应用
- 双系统启动引导项配置
- 木瓜移动荣获金茶奖2021年度游戏服务企业称号
- Date.getyear()、Date.getMonth()、Date.getDay() 已经作废,其他解决办法
- Kafka操作之kafka-topics
热门文章
- 纯代码RelativeLayout实现右上角布局
- 57岁博士创业家人怀疑其被传销洗脑,只因他用这个模式-捷径系统
- 在VMware workstation上使用win_server_2012(Hyper-v)搭建云桌面教程
- 【安装配置】IDEA中配置Maven本地仓库后pom.xml飘红
- 智邦国际ERP系统好不好?
- BUUCTF-[ACTF2020 新生赛]BackupFile
- Tomcat的免安装配置
- SCRIPT5007: 无法获取未定义或 null 引用的属性“call”
- UGUI制作与运用美术字体
- while语句输出一到十