关于element-ui input输入框无法输入（即时显示）问题

最新推荐文章于 2024-08-13 05:18:30 发布
最新推荐文章于 2024-08-13 05:18:30 发布
阅读量4.5k 收藏 2
点赞数 5
分类专栏： vue日记 element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallNut/article/details/105540469
版权

今天在使用element-ui组件写项目的时候，调用modal时遇到了Input框无法输入(实际为未即时显示)
总结了一下，同时触发以下条件会触发此问题
1.此输入框所在页面数据为二次加载(我这边刚好是引用子组件modal)
2.v-modal所绑定属性为复杂数据类型内属性

百度了下发现最便捷的方法是使用@input方法调用$forceDate()进行强制更新渲染
在这里插入图片描述
在这里插入图片描述
希望能帮到遇到这个坑的朋友，感谢前人们分享的问题处理方法才能让这条路更好走

花心小坚果
关注
专栏目录
elementUI中input输入框输入内容时，输入框中未显示展示内容，但是可以获取输入框的值
rong0914的博客
07-15 3248
1.由标题情况描述可知，这必然是界面显示出了问题 2.通过this.$forceUpdate()进行界面刷新即可解决这个问题，解决方法如下： <el-col :span="8"> <el-form-item label="经办部门" prop="deptName"> <el-input v-model="inquiryBaseInfo.deptName" @input="change($event)" clearable disabled> </el-
elementUI中input框无法输入，带默认值的输入框与下拉框无法操作的问题
weixin_43367262的博客
08-09 976
新建弹窗，自带默认值的输入框与下拉框无法操作。 解决办法：绑定input事件可以拿到当前的输入的值，通过this.$forceUpdate() 可以解决这个问题 @input="change($event)" change () { this.$forceUpdate() }
Element系列之el-input-number无法实时监听数据变化的解决方法
老__L的博客
05-17 7465
el-input-number无法实时监听数据变化的解决方法
Unity新输入系统 之 InputActions（输入配置文件）
最新发布
咩咩觉主的博客
08-13 755
输入配置文件
el-input无法实时获取当前输入值的原因之一及解决办法
Yukinoshita_kino的博客
06-19 5552
一. 场景 两个el-input输入框，只能输入数字，输入文字的时候自动替换清空。需要先填满的金额，才能填减的金额，且减的金额必须小于 满的金额。 <template> <el-form :model="addForm"> <el-form-item label="满" :label-width="formLabelWidth"> <p style='margin: 0;color:#f09276'>* 必填 </p>
前端踩坑（八）（element-ui）使用点击重置后无法输入、输入没有显示
TUTsmile的博客
12-19 1835
重置后无法输入 需要给searchInfo设置默认值， 否则清空后，对象不存在对应的set，此时输入无效果
IOS H5 输入框输入后不显示内容，需要失焦后才显示
m0_37634363的博客
06-16 705
input 框输入文本后，还在 focus 的状态，输入的内容显示空白，点击完成失去焦点后内容才出来 解决方案： input 框增加一个样式 transform: translateZ(0);
vue element-ui实现input输入框金额数字添加千分位
10-15
在本篇文章中，作者详细介绍了如何利用Vue和Element-UI框架实现输入框中金额数字的千分位格式化，以及如何在用户输入时处理这些金额数字。以下详细知识点的总结： 1. 使用Vue和Element-UI框架 Vue是一个开源的...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
首先，问题一涉及到了Element-UI的`<el-autocomplete>`组件，这是一个带有输入建议的输入框，用于实现模糊查询。当从后端获取到数据并传入`callback`函数时，预期应该显示输入建议列表，但实际上却只显示了一个空白...
用代码实现element-ui input输入框输入不能为空
04-08
关于你的问题，你可以使用以下代码实现element-ui input输入框输入不能为空： ``` <el-input v-model="inputValue" placeholder="请在此输入内容" :class="{'error': isInputEmpty}" /> <span v-if=...
element-ui实现input输入框金额数字添加千分位组件
xiaohong的博客
03-05 4303
创建一个amountFormat.js const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,"); r
关于element组件里的表单无法输入问题
爬楼梯的前端小白的博客
02-17 1815
关于element组件里的表单无法输入内容问题
在u-modal组件中textarea组件获得焦点时（输入内容时）页面错位
zl871318846的博客
08-08 1048
如图，输入框获得焦点时v-modal组件中的内容左移，电脑上开发时没问题，在手机运行时才会出现。 原因是textarea组件宽度有问题，可以设置为100%，反正宽度撑满就对了。
vue使用element-ui的el-input监听不了键盘事件解决
weixin_30650859的博客
06-11 236
vue使用element-ui的el-input监听不了键盘事件，原因应该是element-ui自身封装了一层div在input标签外面，把原来的事件隐藏了，情况如下： 直接使用标签: 　　<input placeholder="账号" @keyup.enter="doLogin"></input> element-ui: 　　<el-input v-mod...
Vue Element UI 表格中的Input输入无法展示（真解，不骗人）
Future1994的博客
11-18 4701
要给input赋值初始值
el-input监听事件失效
Yiright的博客
08-02 4831
在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件，查了一下原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的：<el-input v-model="input" @keyup.enter="add" placeholder="请输入内容" ></el-input>在@keyup.
el-input-number无法实时监听输入事件？我的解决办法
Dawnchen1的博客
03-22 6552
el-input-number无法实时监听输入事件？我的解决办法 一般来说el-input-number的@change方法只会在blur的时候触发，那如何实时监听输入数字的变化呢? 步骤一：将@change替换成@input.native <el-input-number :ref="'ref' + $index" v-model="row.energy" @input.native="handleInput(row, $index)" :precision="3"
解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题
Java学习
04-14 5764
在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值