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

已于 2022-10-28 10:25:10 修改
阅读量923 收藏 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⁢
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
快速解决element的autofocus失效问题
10-14
主要介绍了快速解决element的autofocus失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+element ，el-form 中加el-col或el-row布局，无法获得光标
热门推荐
weixin_39308542的博客
05-21 2万+
在一个Vue+element 的项目中做表单操作，加入el-col后出现了，输入框点击无效的情况 <div id="app"> <el-form ref="form" :model="form" label-width="80px"> <el-col :span="12"> <el-form-item label=...
el-select的错误提示不生效、el-select验证失灵、el-select的blur规则失灵
最新发布
maktoub的博客
03-30 690
就是很奇怪，如果鼠标从下拉列表里面移动出来，他不会提示信息，只有在最后面提交表单的时候才会提示。blur.capture.native 会在子组件上直接绑定原生的 blur 事件，并且在事件触发时会从内层向外层逐级捕获，直到根组件
因el-col布局引起的表单项无法点击的问题
全干攻城狮
10-22 2973
问题缘由 近日需要开发一个双列的表单编辑页面，伪页面如下： 简单思索后决定使用el-col控制表单项宽度以达到双列的效果 问题出现 由于难度不大，三下五除二就搞定了，伪代码如下： <el-form :model="edit.data" label-width="100px"> <el-col :span="12"> <el-form-item prop="name" label="用户名: "> &
el-col和el-row结合el-form,位置错乱问题
weixin_45652891的博客
12-01 733
问题原因：el-row和el-col的中的span元素之和超过了24的时候，就会出现排版错乱（可见elemet官网，栅格布局方式）问题表现：el-col的内容为空，正常；el-col的内容不一样，回显时，有时正常，有时错乱。el-row和el-col配合el-form 出现排版错乱。
Element-UI el-row 排版样式错乱
weixin_45849417的博客
10-30 602
Element-UI el-row el-col 配合el-form 表单使用，造成样式的错乱。
解决el-select的表单校验输入框有值但校验未通过的问题
a870604723的博客
07-14 715
必须写:model="表单名称" ，否则校验拿不到数据，一直校验undefined，导致选项只要产生变动就提示对应的rules。
el-select 回显成功 表单校验一直失败
ssnnyyjj的博客
05-06 695
3、因为是接口回显时没有返回值，相当于此字段直接是null或undefined，但是此处回显需要的数据类型是string，预测是数据类型不统一导致。1、回显不成功时，给select上加@change="$forceUpdate()"，只能解决了回显不成功问题。问题描述： select回显数据接口没有返回，重新选择后不回显，强制更新后能回显成功，但是校验一直失败。4、强制在接口返回数据成功时做数据类型转换，ok，解决问题。2、使用this.$set()方法赋值也没有成功。
基于element-ui对form表单进行验证时，el-select不起作用问题
janessssss的博客
04-17 1万+
如下图： 对el-select加了如下的验证 enterpriseType: [ { required: true, message: "企业类型不能为空", trigger: "blur"} ], 再选择之后 提示message依然不消失 找了很多，最后发现就是一个很简单的设置问题 把rules里的这条改成： enterpriseType: [ { req...
【vue笔记】el-table中嵌套的el-select 的取值问题
qyq7777的博客
08-23 2784
前言 最近开始在公司实习，想记录一下自己遇到的一些问题和解决办法，不一定完全正确，还在学习中……如果有错误，欢迎批评指正，谢谢。 原型的要求是table中每一行都有一个select，且每一个select之间互不干扰 vue代码如下： 细节 【使用slot-scope=“scope”】 element-ui的官方解释是： 也就是说使用<template scope="scope">后，通过scope.row.键名，可以获取所在行的某一列...
在vue里面，element ui，el-select表单选中校验失败
qq_40712862的博客
07-28 4687
在vue里面，element ui，el-select表单选中校验失败
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解element-ui中表单验证的三种方式
10-16
主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
＜el-form＞标签与＜el-col＞之间的套用导致点击无效的问题
weixin_43873156的博客
07-01 1888
编写简单的<el-form>表单时，可以使用<el-col>用来进行布局，让相关的组件放在同一行。但是今天使用时发现有两个问题： <el-row> <el-col> </el-col> </el-row> ①如果用上以上这样的格式，布局无效 ②如果不用<el-row>标签，则form表单的组件点击无效 问题原理： 经过查找之后发现，源码中在el-form-item.vue的代码...
element-ui 表单校验，el-select校验失效问题
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
回显有值但是校验不通过 表单有值校验失败 element校验问题
Taurus_666
04-26 7135
element表单有值校验失败，页面回显有值校验失败问题解决方案
Element el-date-picker 表单校验和数据回显问题解决方法
10-09
对于 Element UI 的 el-date-picker 表单校验和数据回显问题，可以通过以下方法解决： 1. 表单校验： - 使用表单校验规则进行验证。在 el-date-picker 上使用 `rules` 属性来设置校验规则，例如： ```html <el-form-item label="日期" prop="date"> <el-date-picker v-model="date" type="date" placeholder="选择日期" :rules="dateRules"></el-date-picker> </el-form-item> ``` ```javascript data() { return { date: '', dateRules: [ { required: true, message: '请选择日期', trigger: 'change' } ] } } ``` 2. 数据回显： - 在 el-date-picker 上使用 `v-model` 绑定一个变量，通过该变量控制日期的值。 - 在需要回显数据时，将数据赋值给绑定的变量即可实现数据回显。 以下是几个

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值