el-table中嵌入el-input无法输入

最新推荐文章于 2024-04-30 14:45:25 发布
最新推荐文章于 2024-04-30 14:45:25 发布
阅读量848 收藏 2
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46410488/article/details/130961364
版权

今天工作时需要在表格中嵌入输入框，在表格打开时将数据回显到输入框中使其可以修改，但发现输入框的值回显过后就无法修改，用来一天时间终于解决了，在此记录一下。

在确定html没有问题后我检查了回显赋值时的代码

感觉是因为双向绑定没有生效，然后就看到了这篇文章

vue中$set用法详细讲解_Oralinge的博客-CSDN博客 

 

一下就明白了之后将回显赋值代码改成这样就ok了 

 

如夜微凉
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element-ui版本问题导致el-table-column输入框无法输入
猫大人的博客
12-01 254
起因 有次发版后，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.就想是不是运维弄错了
el-table 中嵌入el-input 输入框无法输入问题（已解决）
蓝胖子的博客
07-20 4877
el-table 中嵌入el-input 输入框无法输入问题（已解决）
el-table表格编辑时输入校验
最新发布
LoveHaixin的博客
04-30 662
2.点击输入框输入，点击某一个字段，即正在输入状态，这个字段的校验结果就会被清除（clearValidate）1.不输入数据，直接点击“提交”触发校验，由于数据没有输入，校验不通过，给出校验提示。4.校验通过，显示全屏提示是否提交，点击“确定”即可，控制台会打印“校验通过。2.由于每行都需要校验，因此需要借助scope.$index。外层嵌套一层el-form，使用el-form的校验机制。3.数据都填好之后，点击“提交”，再次触发校验。1.需要借助el-form的校验，
vue3 element plus el-input 无法输入问题
supming1的专栏
11-11 8853
最近用vue3 elementplus进行开发，发现el-input无法输入，代码如下： <template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...
开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)
Mr_LiuP的博客
10-20 3305
原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名 和 用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。
el-input 不能输入的解决办法
我的博客
08-09 883
在使用ElementUI过程中，经常会发生el-input无法键入值的问题
Vue循环中多个input绑定指定v-model实例
11-19
如果你在使用Element UI的表格组件`el-table`，并且要在表格单元格内嵌入`input`，可以这样做： ```html <el-table :data="tableData"> <el-table-column prop="name"> <template slot-scope="scope"> <el-input...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
然而，在实际应用中，尤其是在表格中嵌入表单元素并进行数据验证时，会遇到一些挑战。本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在HTML模板中，我们可以直接将`el-input`或`el-select`等Element UI组件放入`<el-table-column>`内，这样每个单元格本身就具备了编辑功能。例如，对于`fildna`列，我们使用`el-input`来绑定模型，允许用户直接修改...
elementui加vue.js 生成可输入表格可动态增加列
05-11
如果需要实现单元格的编辑，我们可以使用`<el-input>`组件，将其嵌入到单元格中。当用户编辑时，我们可以监听输入框的`input`事件，同步更新数据源。同时，`<el-table>`还提供了`cell-dblclick`等事件，可用于触发...
06-Vue全家桶-项目实战（下）4
08-03
为了定制化表格列，例如用户状态列和操作列，我们可以使用作用域插槽来实现，例如在用户状态列中嵌入`el-switch`开关组件，用户可以通过开关切换用户状态。当状态改变时，通过`@change`事件调用`stateChanged`方法，...
el-input实现不了输入的原因
weixin_44740072的博客
06-20 6895
el-input实现不了输入，页面渲染不上的原因
vue的el-input无法输入内容
weixin_42483208的博客
12-04 1326
遇到el-input无法输入内容的时候，添加@input=“change($event)” methods中： change() { this.$forceUpdate() }
Vue+element ui中el-input无法输入问题
热门推荐
Coludidi的博客
07-22 1万+
el-select和el-input无法输入问题
【前端学习日记】element-UI表格列嵌套输入框无法输入的情况
qq_54207312的博客
07-15 1823
啊啊啊，各位学习vue中的孩子们，你们一定会遇到的，就是表格里面嵌套表单元素，比如文本框或者数字框，然后你会发现，样式是没问题的，但是输入文本的时候，却不显示，仿佛被强制删除了。然后我看了自己的代码，发现表格的单元格实际上已经绑定了prop属性，通过prop的属性值我们可以在data中为其赋值，但当我们在内部再添加一个表单元素，表单元素的绑定又是一个属性值，虽然我们输入以后确实表单数据改变了，但是表格的数据却没有显示，中间仿佛差了一环。经过查阅许多大神的类似问题解决方案，事件啥的，不起作用。...
vue.js element el-talbe 内嵌el-input 无法编辑，视图不刷新（更新）
04-05 4138
不知道为什么el-table里的el-talbe-column内嵌el-input后修改内容后会无法刷新出新内容，实际log看数据是更新了，不过就是试图不刷新 html代码 <el-table-column prop="totalAmount" label="换购价" width="150"> <template slot-scope="scope"> ...
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
bigbomb369的博客
07-05 3681
其实此处打的问题是内容已经被修改了，但是table表格因为没有更新数据，所以看起来像是没有修改成功 此处可以添加给对应的input标签添加@input=“onExchange（scope.$index）” <template slot-scope="scope> <el-input v-model="scope.row[item.prop]" @input="onExchange(scope.$index)" type="tex
el-table中嵌入el-input无法编辑数据的问题
lll19960406的博客
01-25 548
最近在写一个在表格中修改表格数据的需求。 正常在表格中嵌套el-input，但是无法编辑保存数据。 后来发现是数据其实保存了，但是页面上没有更新。通过以下方法得以解决 以下是部分代码，有需要可以自己补全 <el-table-column label="图片名称" align='center'> <template slot-scope="scope"> ...
el-table中嵌入el-input但是无法输入
06-09
如果你在 `el-table` 中嵌入了 `el-input` 但是无法输入，可能是由于 `el-table` 的滚动条和 `el-input` 的焦点冲突导致的。你可以尝试在 `el-table` 上添加 `@click.native` 事件，然后在事件处理程序中使用 `$refs...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值