el-input赋值回显，校验未关闭解决办法

最新推荐文章于 2024-06-19 11:48:18 发布
最新推荐文章于 2024-06-19 11:48:18 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43925947/article/details/105831832
版权

需求：一个输入框 在用户focus的时候给一个选择的弹窗进行进行单选 然后回显给当前页面的e-input输入框
问题：每次回显的时候校验不通过
解决办法：使用validate-on-rule-change 默认为true 改成false就好了在这里插入图片描述

解决代码

    <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="120px"
                  class=&
最低0.47元/天 解锁文章
一个没有理想的程序猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
主要介绍了element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
el-input的回显问题
laoyaoshilaoyao的博客
12-24 1917
回显问题，一般解决点击页面不显示的问题 el-input 输入却不显示输入的内容 change(){ this.$forceUpdate() }
el-input的输入内容校验及限制字符输入
最新发布
AM1n98的博客
06-19 877
记录下最近做的两种校验1. Form 表单的rules校验2. input输入框的@input校验。
el-input 赋值 不回显
Ninewu的博客
04-12 3134
问题：给input框赋值不回显需要点击其他输入框才会回显 解决：事件中添加 强制刷新 this.$forceUpdate() 好啦，测试一下
【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法
小墨鱼的前端问题录
09-21 2067
【代码】【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法。
elementui中的el-input回显成功后input框不能进行编辑的问题
Redamancy的博客
08-28 3888
通过接口拿到数据后，input框无法进行编辑 <el-dialog v-dialogDrag title="RPA" :visible.sync="accountVisible" width="30%"> <el-form ref="accountForm" :model="accountForm" :rules="rules" label-width="200px"> <el-form-item label="Channel" prop=
使用element-ui表单验证时,number验证一直出现提示,提示不消失
old_hu的备忘录
05-06 5834
使用饿了么提供的表单数字验证时,明明输入的也是数字,但是提示的红色字体一直不消失,后来发现,就算输入的是数字,但是input输出的也是字符串, 所以在v-model加上.number---- v-model.number=" " 即可解决问题 ...
vue-phone-number-input：使用Vue JS进行的电话号码输入（格式和有效电话号码）
02-06
电话号码输入 一个漂亮的文本字段，用于格式化VueJS制作的电话号码我的新图书馆的新版本： 新...演示版安装使用纱yarn add vue-phone-number-input 使用npm npm i --save vue-phone-number-input 用法ES6模块/ Commo
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
<el label=户籍所在地 prop=censusLand xss=removed> <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @...
vue初始化及样式绑定
上上迁的专栏
11-26 438
文章目录前言关键字一、项目初始化建目录二、样式绑定 前言 行是知之始，知是行之成 关键字 v-bind 一、项目初始化 建目录 例如：D:\vuecode 进入目录输入回车 ``` code vue-demo-02 ``` **PS D:\vuecode\vue-demo-02> npm init -y** Wrote to D:\vuecode\vue-demo-02\package.json: { "name": "vue-demo-02", "version": "1.
Element-ui表单校验不通过,input内有内容仍验证失败的问题
weixin_61597234的博客
10-08 2839
解决form表单有内容，但校验不通过的问题
el-input 关于动态校验数字类型时修饰符.number失效
m0_46529579的博客
12-04 3478
问题一： el-input标签内设置type=“number” ，中文输入法输入，在失去焦点时就会录入英文字符 问题二： el-input标签内设置v-model.number=“form.name”，默认值为数值型字符串（例如后台动态返回数据），则rules校验会报错，如下图： 问题三： 如果是非必填的，可以为空，若不为空则需要校验输入类型为数字。 问题四： 使用.number修饰符或者使用Number()方法均会使得输入数字+字符，最终提交会自动转换成数字 解决办法 1、rules里面用type：‘n
Vue中el-input的相关校验使用场景
weixin_44582077的博客
01-20 2770
el-input的相关校验使用场景
element-ui输入框数据回显时无法编辑
正一品程序员的博客
11-01 1540
解决方法1：使用this.$set() data(){ return{ companyForm:{ detailedAddress:"" }, editValue:"编辑的值" } }, methods:{ handleEdit(){ this.$set( this.companyForm,//要修改的对象或数组 'detailedAddress',//要修改的具体值 thi
Vue+Element关于数据在数组进行回显，并进行修改数组当前的数量
小hu同学
08-29 1651
说一下我遇到的问题吧，我在按钮2页面，当我模糊搜索点击后，后端返回给我的值是 b,但是我绑定的是a,后端需要的也是a,这个时候我就要将b赋值给a,去修改a,然后保存将a传给后端。说明：在按钮1页面的操作是将商品购买进库，点击按钮保存，按钮2页面的操作是将刚刚采购进来的商品进行库存的变更，商品的信息不能做修改，只能修改数量。名称是，是做的模糊搜索，点击搜索出来的物资，将当前的信息回显到当前的一行，并且进行数据的修改。我这种只能算很low的解决办法吧，有更好的办法可以评论区讨论讨论。1、第一种（直接赋值）...
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 4万+
日常开发中输入框正则校验大全-------持续更新维护中.......
element配置动态表单，根据类型配置校验、输入框类型、回显以及自动生成表单
分享互联网的有趣知识~
07-12 1530
某些场景下，我们的表单需要做成可配置表单，根据管理员配置好的表单信息来动态生成表单，比如业务员就只能填写业务类型的表单信息，运营人员可以配置活动类型的表单信息，类似于表单的权限控制，本文带你走过动态表单的那些坑。
el-input数据回显
11-15
el-input是element-ui中的一个输入框组件，可以通过v-model指令来实现数据的双向绑定，从而实现数据回显。具体实现方法如下： ```html <template> <div> <el-input v-model="inputValue"></el-input> <p>输入的内容是：{{inputValue}}</p> </div> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` 在上述代码中，我们通过v-model指令将el-input组件的输入值与data中的inputValue属性进行了双向绑定。当用户在输入框中输入内容时，inputValue属性的值也会随之改变，从而实现了数据回显。最后，我们在页面上展示了输入的内容，方便用户查看。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值