element-ui 表单校验，el-row下的el-select校验失效，回显时校验失效，有值却校验

已于 2022-10-28 10:25:10 修改
阅读量1k 收藏 3
点赞数 2
文章标签： vue.js javascript elementui echarts 前端
于 2022-10-28 10:17:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TAAAAAB/article/details/127566424
版权

场景如下
项目中有权限配置 弹窗中表单验证 回显时校验失效 一直触发表单验证 代码如下
在这里插入图片描述
查了相关资料
form表单里面 el-row包裹下的el-form-item中的el-select会出现失效的情况 层级太深 检测不到form的变化
解决方法
1：强制更新dom触发（视图更新）
在这里插入图片描述
2:在change事件里对form表单绑定的数据进行拷贝
this.form = JSON.parse(JSON.stringify(this.form))
或者
在这里插入图片描述

问题解决

super5⁢
关注
VUE项目使用Element-ui 下拉组件的验证失效问题
Calla_Lj的博客
11-05 1万+
Element-ui 下拉组件的验证失效问题 问题描述: 在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的, 就会出现下拉框验证时失效问题. 问题现象: 如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求 解决办法: 确认触发方式为change事件 增加相对应的type属性 代码 r...
element-ui中select组件绑定值改变,触发change事件方法
10-18
本文将详细解析Element UI中select组件绑定值改变时如何触发change事件的方法。 Element UI是一个基于Vue.js的前端UI框架，它提供了一套完整的组件库以帮助开发者快速构建美观、风格统一的界面。select组件是其中...
基于element-ui对form表单进行验证时，el-select不起作用问题
热门推荐
janessssss的博客
04-17 1万+
如下图： 对el-select加了如下的验证 enterpriseType: [ { required: true, message: "企业类型不能为空", trigger: "blur"} ], 再选择之后 提示message依然不消失 找了很多，最后发现就是一个很简单的设置问题 把rules里的这条改成： enterpriseType: [ { req...
解决el-select的表单校验输入框有值但校验未通过的问题
a870604723的博客
07-14 949
必须写:model="表单名称" ，否则校验拿不到数据，一直校验undefined，导致选项只要产生变动就提示对应的rules。
el-select 回显成功 表单校验一直失败
ssnnyyjj的博客
05-06 941
3、因为是接口回显时没有返回值，相当于此字段直接是null或undefined，但是此处回显需要的数据类型是string，预测是数据类型不统一导致。1、回显不成功时，给select上加@change="$forceUpdate()"，只能解决了回显不成功问题。问题描述： select回显数据接口没有返回，重新选择后不回显，强制更新后能回显成功，但是校验一直失败。4、强制在接口返回数据成功时做数据类型转换，ok，解决问题。2、使用this.$set()方法赋值也没有成功。
element-ui 表单校验，el-select校验失效问题
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解element-ui中表单验证的三种方式
10-16
在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
在本文中，我们将深入探讨Element-UI框架中的级联菜单（Cascader）组件，特别是在实现城市三级联动菜单以及处理回显问题时所遇到的技术细节。Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
在vue里面，element ui，el-select表单选中校验失败
qq_40712862的博客
07-28 4981
在vue里面，element ui，el-select表单选中校验失败
element ui 下拉列表验证无效的问题（通俗易懂）-实例讲解
梁同学与Android
08-24 5226
在写vue 项目的时候遇到以下问题 1.表单校验中，el-input前面有星号*而el-select前面无星号*,证明校验无效，如下图所示 相关代码如下 <el-form-item label="电话" :label-width="formLabelWidth" prop="tel"> <el-input v-model="addForm.tel" style="width: 350px"></el-input> </el-form-item&gt
vue+element开发使用el-select不能回显处理
weixin_39277183的博客
12-22 2653
下拉框选择的时候，选不上下拉框的值，element提供了@change事件使用vm.$forceUpdate() 方法进行强制刷新，就可以把值渲染上去。 <el-select v-model="price" clearable placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="(item, ..
elementUI下拉框切换引起的校验规则无法清除的问题
程序员的自我修养
08-12 2798
问题描述 切换下拉框选项，下面的输入框联动显示指定内容或者清空内容，在显示指定内容的情况下，一切正常； 当需要清空内容时，清空这一动作会触发校验规则，于是会出现切换下拉选项后清空内容立即出现校验规则“此项为必填项” ，但这样是不对的，因为用户并没有开始填写。 解决办法 经过各种移除校验的尝试，只有一种方式可以达到效果： 例如：需移除校验的是domainCode字段，那么： 1. 将domainCode的校验规则全部移除； 2. 将domainCode字段清空； 3. 在setTimeou
【FAQ】解决Element UI Form resetFields、clearValidate不起效和不显示验证状态等问题
朝拜者
07-02 6152
解决Element UI Form resetFields、clearValidate不起效和不显示验证状态等问题
el-select的错误提示不生效、el-select验证失灵、el-select的blur规则失灵
最新发布
maktoub的博客
03-30 1418
就是很奇怪，如果鼠标从下拉列表里面移动出来，他不会提示信息，只有在最后面提交表单的时候才会提示。blur.capture.native 会在子组件上直接绑定原生的 blur 事件，并且在事件触发时会从内层向外层逐级捕获，直到根组件
Element form表单校验不消失问题
ZHANGWEI19930118的博客
02-26 1万+
今天在使用Element表单校验的时候遇到的问题，有一个下拉框在第一次什么都不选时点击提交会触发校验提示，但是当提示后在为下拉框选择值得时候校验的提示依然存在不会消失。搞了好久都没找到问题，后来在百度上发现解决方法， 原因是表单域的item项的prop与组件的绑定值v-model的值要一样，比如;prop=&quot;aaa&quot;那么v-model的值也要等于“aaa” ...
避坑19_elementui校验空值，错误提醒不消失
linxwx的博客
11-21 810
没有给el-forem加上:model="ruleForm"
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6190
的问题，我就将
Element el-date-picker 表单校验和数据回显问题解决方法
10-09
对于 Element UI 的 el-date-picker 表单校验和数据回显问题，可以通过以下方法解决： 1. 表单校验： - 使用表单校验规则进行验证。在 el-date-picker 上使用 `rules` 属性来设置校验规则，例如： ```html <el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值