element-ui 表单不能输入问题处理

最新推荐文章于 2024-01-23 17:53:03 发布
原创 最新推荐文章于 2024-01-23 17:53:03 发布 · 577 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html5 #elementui

文章讲述了在Vue应用中遇到的密码输入弹窗问题：输入一半关闭后再次打开，输入框无法输入。作者尝试使用`$forceUpdate()`强制视图更新但导致校验失效。最终发现了一种方法来实现功能，同时避免这类问题，分享以防止他人重复踩坑。

问题描述：
输入密码弹窗，信息输入一半，关闭弹窗，二次打开弹窗后，输入框无法输入内容
解决办法：
首先想到了是 强制更新视图 this.$forceUpdate()
给输入框添加@input事件 强制更新视图 但是问题来了，校验不起作用了，放弃了这个方法

最后经过多次尝试，这个方法可以实现 特此记录，防止踩坑

 

详解elementUI中input框无法输入的问题
10-15
主要介绍了详解elementUI中input框无法输入的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于element-ui表单中限制输入纯数字的解决方式
10-14
为了解决Element UI表单中限制输入纯数字的问题，本文首先通过一段简单的HTML代码示例，展示了一个基本的实现方法。即利用`<input>`元素的`oninput`事件处理器，配合正则表达式来移除任何非数字的字符。代码如下： ...
Element表单中输入框无法输入
你的阿迁
06-13 2623
一开始我以为是响应式丢失的问题，然后在侦听器中通过set处理这个输入框的数据，这时候已经生效了，但是在多个下拉框多次选择数据及弹层打开关闭的情况下，依然存在之前不能输入的情况。：所遇到的问题是，在表单中有部分输入框是根据下拉框所选择的数据来显示和隐藏的，这时候就遇到有的输入框存在不能输入的问题（可以聚焦，但是输入无效）：在输入框的input事件中调用$forceUpdate() 进行强制刷新。
element-ui table中文本框input无法输入问题
热门推荐
White_Poppy的博客
10-11 1万+
正常我们写文本框输入： <table> <el-table-column prop="name" label="姓名" width="200"> <el-input v-model="name"></el-input> </el-table-column> <el-table-colum...
element-ui 表单重置后，input和select等组件无法输入或选择值
weixin_51771963的博客
01-23 1484
问题：使用element-ui 的 el-form组件的重置后 ，输入框和下拉框等组件不能输入内容，点击查询后才显示输入的内容。原因：el-form的formData如果没有设置默认值的话就是一个空对象，清空后再次输入就会无法及时挂载到dom上。解决办法：表单的formData在初始时赋值空字符串就可以了。
[vue+element-ui] form中输入框无法输入问题的解决方法
m0_51980089的博客
09-20 1万+
本文介绍了笔者在使用element-ui时无法在form中实现输入框功能，即“无法输入”问题的解决方法，亲测有效。
精选资源
element-ui.rar element-ui核心库压缩包
12-20
这段代码展示了如何创建一个包含两个输入字段的表单，并使用 Element UI 的表单验证功能。当点击“提交”按钮时，会调用 `submitForm` 方法，如果表单验证通过，会显示提示信息。 总的来说，Element UI 是 Vue.js ...
精选资源
element-ui 2.15.14, 静态资源版本, 纯HTML可用
02-13
2.15.14版本是Element UI的一个静态资源版本，允许开发者将Element UI的组件以静态资源的形式引入到项目中，即便是在不依赖Vue框架的情况下，通过纯HTML代码也可以使用Element UI的组件，这为开发提供了极大的便利性...
精选资源
element-ui资源包
08-03
Element UI 提供的组件包括但不限于按钮、表格、表单、日期选择器、下拉菜单、轮播图、提示信息、对话框、通知、布局等，这些组件都遵循了 Material Design 设计规范，具有良好的交互性和一致性。在实际开发中，你...
element-ui 2.15.14版本
10-09
Element UI 的组件包括按钮、表单、表格、对话框、通知、布局等，这些组件都是遵循 Material Design 设计原则的，提供了丰富的样式和交互效果。例如，按钮组件可以设置不同颜色、大小和形状，表格组件支持数据排序、...
element-ui版本问题导致el-table-column输入框无法输入
猫大人的博客
12-01 542
起因 有次发版后，el-table-column的输入框无法输入了，本地项目测试OK，测试环境测试OK，就是生产发生了这个事情。 查询原因 三个环境有两个好的，排除代码问题，于是就想到了可能是依赖的element-ui的版本问题。 本地element-ui版本是2.4.10,测试element-ui版本是2.8.2,而生产运维用是最新的版本(2.14.1). 当即查看了一下element-ui的所有版本npm view element-ui versions,发现版本最新到2.13.1.就想是不是运维弄错了
关于element的表格数据行赋值给表单，会出现表单输入框无法输入的情况
qq_38181746的博客
01-13 1507
解决在表格数据行赋值给表单，会出现表单输入框无法输入的情况 有时候在点击表格的某一行，把这一行的数据赋值给Dialog弹窗，然后会出现输入框无法输入更改值的情况 这里有一些人用了一个粗暴的方法直接强制刷新，this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Input的表单校验失效了！所以使用了this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Input的表单校验失效了！所以使用了this.forceUpdate()，但是这个强制刷新，还衍生出了新问题：Inp
element-ui form表单校验重置表单后无法输入
kis_wuyan的博客
08-17 2796
element-ui form表单校验重置表单踩得一个小坑 着急的话直接看文章底总结 前言，给form表单加了rules校验后，提交表单前进行字段检查 this.$refs[formName].validate( valid => { // validate接受两个参数，具体参考element官网api文档，第一个是boolean值 if(valid) { // 为true时，说明表单校验通过，符合rules }else { // 不满足时的逻辑处理 } } 然后提交前检查完事 打开
解决：element ui表格表头自定义输入框单元格el-input不能输入问题
web-Danli的博客
11-14 1939
表格表头如图所示，有 40-45，45-50 数据，且以输入框形式呈现，现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入，部分代码如下。Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。结果不能输入，解决方法就是在表头自定义时将漏掉的。去获取数据，于是没有加上。
关于vue3使用Element ui输入框无法输入的简单解决方法
u010518531的博客
07-04 2341
这应该是解决element ui输入框无法输入最简单有效的方法了。
el-table 中嵌入el-input 输入框无法输入问题（已解决）
蓝胖子的博客
07-20 6345
el-table 中嵌入el-input 输入框无法输入问题（已解决）
element-ui 表单回显请求回来的数据后无法输入
X_iao_yun的博客
12-04 885
element-ui 表单回显请求回来的数据后无法输入就很奇怪
Elementui中输入框无法输入？
shuaiqingfeng的博客
05-05 7093
有时候我们在用到elementui input这种输入框的时候会出现输入不显示，无法输入这种情况 可以在标签加上@input="change($event)" 在methods实例中调用这个方法就可以解决了
vue element-ui表单 input只能输入整数
最新发布
12-03
在 Vue 和 Element - UI 表单中，让 input 只能输入整数可以通过以下几种方法实现： ### 方法一：使用 `@input` 事件结合正则表达式 通过监听 `@input` 事件，在事件处理函数中使用正则表达式验证输入值是否为整数...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值