element-ui 表单校验,el-select校验失效问题
form表单验证时,遇到了校验失效问题,有值的情况下,校验规则并没有对应消失,检查了几个容易出错的地方:1、:model="addForm" 用model绑定表单,而不是v-model,没问题
<el-form:model="addForm"class="addForm"ref="addForm":rules="rules"label-position="right"label-width="130px"></el-form>
2、需要添加校验的对应字段,是否添加了prop属性,ok没问题
<el-form-item :label="`对应字段:`" prop="fieldName"><el-selectv-model="addForm.fieldName"placeholder="请选择对应字段"clearablestyle="width: 100%;max-width: 100%;"@change="changeField":disabled="operType == 2"><el-optionv-for="item in fieldList"v-bind:key="item.fieldName":label="item.fieldName":value="item.fieldName"></el-option></el-select>
3、检查rules,里面校验提示的事件是否正确,发现了问题,之前el-select,trigger时候用的“blur”,导致失效,现在 el-select 统一改为"change"
rules: {ruleCode: [{ required: true, message: `规则编码不能为空`, trigger: "blur" }],menuCode: [{ required: true, message: `对应菜单不能为空`, trigger: "change" }],tableName: [{ required: true, message: `对应表不能为空`, trigger: "change" }],fieldName: [{ required: true, message: `对应字段不能为空`, trigger: "change" }]},
奇怪的是,我表单里面有三个el-select,其他两个生效了,只有另外一个没有生效,也是醉了,于是我请教了大佬,大佬告诉我,form表单里面,el-select会出现失效的情况,尤其是我这个el-foem-item 里面又嵌套了el-row
<el-col :span="12"><el-form-item :label="`对应表:`" prop="tableName"><el-selectv-model="addForm.tableName"placeholder="请选择对应表"clearablestyle="width: 100%;max-width: 100%;"@change="change":disabled="operType == 2"><el-optionv-for="item in tableList":key="item.tableName":label="item.tableName":value="item.tableName"></el-option></el-select></el-form-item></el-col>
,层级太深了,form检测不到addform的变化,这个时候要么change事件里面强制更新dom触发(视图更新)
change(val){
this.$set(this.addForm,'tableName',val)
this.$forceUpdate()
}
,要么再change事件里面对form表单绑定的数据进行拷贝 this.addForm = JSON.parse(JSON.stringify(this.addForm));或者 像这样描述下 this.addForm = { ...this.addForm };
change(val){
this.addForm={...this.addForm}
}
我遇到的问题,通过第二种方式:拷贝或者描述生效的,以上是我近期遇到的bug修复的方法,大家可以借鉴一下,如果大家有更好的方法,可以分享哦
element-ui 表单校验,el-select校验失效问题相关推荐
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
- element UI 表单自定义验证,css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...
- element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
- element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
- vue开源Element UI表单设计及代码生成器
1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
- element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...
- Element UI——表单验证输入的数字检测出来是string解决方案
问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
最新文章
- 改变Repeater控件中按钮颜色
- Spring Cloud第九篇:链路追踪Sleuth
- 如何使用VS2015开发Qt5程序
- 文本挖掘(part1)--文本挖掘概述
- 基于.NET CORE微服务框架 -谈谈surging API网关
- 前端学习(2585):前端怎么在响应头和请求头里面拿数据?
- 电影与爆米花(模拟)
- C# JsonHelper类
- SQL Server 2005中专用管理员连接 (DAC) 使用技巧修改系统表的方法
- 计算机三级之嵌入式系统学习笔记9
- UNIX网络编程(第三版 ) 测试代码 7.3
- EFK6.3+kafka+logstash日志分析平台集群
- Android Webview SSL 自签名安全校验解决方案
- 3.1 RNN 循环神经网络 概述(上篇)
- kdj买卖指标公式源码_炒股秘籍——KDJ你所不知道的绝密用法(附指标公式源码)...
- CDN技术--分布式网站架构必备利器
- matlab aic怎么用,AIC信息准则的编程
- idea和搜狗输入法快捷键冲突_Win10 输入法简繁体快捷键与 IDEA 冲突
- css3里面的放大镜特效,用纯css3实现的图片放大镜特效效果非常不错
- 历时一个月整理2021金三银四Java面试题汇总,足足127页!
热门文章
- 【系统】win10 media feature pack提示:【此更新不适用于您的计算机】
- AG9310与AG9311参数对比和方案选择方法
- Python 读pdf数据写入Excel表中
- silverlight中TextBox控件的使用
- 如何设置计划任务程序 每6小时运行一次_如何用 Python 打造一个全自动赚钱的 YouTube 视频发布系统并月入过万(被动收益)
- 单片机开发用到的intrins.h文件
- Win8快速关机命令
- 银行业务细分,商业银行业务学习
- java加密解密 pdf_Java 加密和解密PDF文档
- hdu 2276【Kiki Little Kiki 2】