elementUi里面的el-input框有时候无法输入的问题

最新推荐文章于 2024-07-15 15:24:14 发布
最新推荐文章于 2024-07-15 15:24:14 发布
阅读量3.1k 收藏 5
点赞数
分类专栏： WebSan
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/108286119
版权
本文介绍了在使用Element UI时遇到el-input组件无法输入值的困扰，详细描述了问题现象：在添加时正常，但在修改时连光标都无法移动。经过代码排查未发现问题，最后发现解决方案在于利用change事件和event对象，通过强制刷新状态来应对视图未更新的情况，如数组或对象变化时。此方法能在不刷新整个组件的情况下，保持界面不变并解决问题。
摘要由CSDN通过智能技术生成

今天在用element ui 的时候有一个text 输入框没办法输入值。
在添加可以，在修改就连光标也不能移动了。
如图
在这里插入图片描述一度以为自己写的代码有问题，是自己绑定值的时候出现的绑定失误造成的。
但是经过排查后发现代码没有问题：

  <el-row>
        <el-col :span="8">
          <el-form-item label="出版社名">
           
             <el-input v-model="dataForm.publisherName"   type
最低0.47元/天 解锁文章
milijiangjun
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
elementUI中input框无法输入的问题及原因
大白兔学编程的博客
06-05 1万+
新增的时候input突然不能输入内容了 就是输入不进去 解决1. 猜想就是输入内容没渲染，这里用@input="change($event)"方法监听input输入，this.$forceUpdate()手动渲染 <el-input v-model="dataForm.listingNumber"@input="change($event)" placeholder="挂牌号" /> change (e) { this.$forceUpdate() } 解决2. 后来发现这样做还要
ElementUI-el-input无法输入
yangwq的博客
06-04 1250
原因分析：可能是组件套用太深 vue检测不到视图更新 解决方案：在失效输入框的input事件中加入this.$forceUpdate()强制刷新 <el-form :model="item" label-width="85px" label-position="left" size="mini"> <el-form-item label="事件类型" prop="parent"> <el-input v-model="item.parent" @i
整理element UI的常见问题
lztry_的博客
09-02 1357
常见问题form 下面只有一个 input 时回车键刷新页面表格固定列最后一行显示不全气泡确认框文档里的confirm事件不生效输入框用正则限制但绑定值未更新去除type="number"输入框聚焦时的上下箭头只校验表单其中一个字段弹窗重新打开时表单上次的校验信息未清除表头与内容错位表单多级数据结构校验问题表格套input动态验证表格跨分页多选根据条件高亮行并去除默认hover颜色表单不想显示label但又想显示必填星号怎么办table 内嵌 input 调用 focus 方法无效表格内容超出省略el-tr
Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效
最新发布
qq_38572963的博客
07-15 986
【代码】Vue + ElementUI el-input无法输入、修改、删除的问题，输入无效。
element-ui el-input内容输入不进去原因
Tose_的博客
11-12 1942
（1）是否使用v-model双向绑定数据 （2）如果用v-mode双向绑定之后，还不能输入的解决方案是： this.$forceUpdate() //手动更新视图 例子： <el-input @input = “change($event)”> mothods:{ change(e){ this.$forceUpdata(); } } ...
Element的el-input组件无法输入问题
罗毅豪的博客
01-19 41
以下为el-input的代码。在被赋值后，输入框组件出现无法输入的问题。 <el-input v-model="ruleForm.processReview" class="oms-input" type="textarea" placeholder="请输入处理意见" /> 解决方式：增加@input触发事件，即@input="change($event)"。 ...
Element-ui el-input 无法输入问题
qq_55911180的博客
09-09 698
Element-ui el-input 无法输入问题
详解elementUI中input框无法输入的问题
10-15
然而，有时候在实际开发过程中，开发者可能会遇到一个棘手的问题：Input框无法输入。本文将深入探讨这个问题，并提供解决方案。 首先，我们要理解Element UI Input组件的基本用法。Input组件提供了一个简单的文本...
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4257
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
elementUI el-input关键字模糊查询el-table数据 不改变原始数据
Lisa_Xiaotouzi的博客
05-25 1716
1.源代码： 需要一个 el-input 和el-table >>dormitoryTable >>:data="tables" 绑定的数据 >>tableData: [] 声明并初始化表格数据，记得添加对应数，我这里是在初始化的时候以及获取了后端传给的数据 2.在computed中添加模糊搜索方法tables // 模糊搜索 tables() { const search = this....
vue+element 使用el-input输入框自动聚焦问题
sinat_41657240的博客
05-08 2484
element中el-input有autofocus属性，但是这个能在第一次初始化的时候自动聚焦，解决办法： <div> <i v-if="!showSearch" @click="searchClick"></i> <el-input prefix-icon="el-icon-search" v-if="showSearch" clearable autofocus="true" placeholder="请输入关
element-ui的input无法输入
summer_girlcc的博客
04-06 125
问题描述:在一次项目中出现element-ui的el-input无法输入 查阅资料发现 是因为组件嵌套太深 导致视图无法更新 解决: 绑定input事件 强制更新视图 <el-input size="mini" v-model="item.value" @input="inputChange($event)"></el-input> inputChange() { this.$forceUpdate() } ...
【vue】elementUi里面的el-input框有时候无法输入的问题
达则兼济天下
08-04 914
原因:视图没有更新的问题 解决方法 this.$forceUpdate() chenge(e){ this.$forceUpdate() }
关于el-col导致el-input无法输入的问题
weixin_70618041的博客
01-30 865
vue的小错误
vue中el-form下的el-input无法输入的问题
Jxiaowei的博客
04-27 2193
vue中el-form下的el-input无法输入的问题
elementPlus input框输入的内容无法用鼠标选择。
weixin_47282274的博客
06-27 749
最后npm uninstall element-plus --save；重新npm install element-plus --save；试了很多方法都不能解决，如 input上有没有 user-select: none，之类的，解决方法：重新安装elementPLus。
前端vue elementui中el-input只能输入数字
05-27
如果你想让 `el-input` 中只能输入数字，可以添加 `type="number"` 属性。示例代码如下： ```html <el-input type="number" v-model="num"></el-input> ``` 这样，用户在输入框中只能输入数字，如果输入非数字字符...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值