ElementPlus table嵌套 el-input每次只能输入一个字母就是去焦点

已于 2024-06-18 11:44:18 修改
阅读量371 收藏
点赞数 3
分类专栏： ElementPlus VUE3 文章标签： vue.js 前端 javascript
于 2024-04-26 14:00:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33225414/article/details/138216874
版权

问题环境：el-table的数据是动态追加出来的。如下图，此处需要可编辑，故采用scope写法来替换（prop属性键写法）

解决：row-key 绑定的属性更换成id（原先绑定的是可编辑的transactionCode），由于transactionCode是输入框绑定的v-model对象，可变

-草莓星球杯
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题
cd_yang2017的博客
03-08 1409
el-table组件中嵌入el-input输入框无法获取焦点，无法编辑。可使用父元素监听方式获取焦点。
elementUi中input输入字符光标在输入一个字符后，光标失去焦点
weixin_30300523的博客
04-20 5372
elementUi中input输入字符光标在输入一个字符后，光标就退出，无法输入需要再次聚焦然后输入一个字符又再次退出 首先，用elementUi正常用v-model绑定输入的值是不会造成光标退出的，原因是用了局部作用域插槽，导致光标输入，table下的数据刷新， 导致table重绘，光标失去焦点 解决办法是table绑定一个初始化的模拟数据，，插槽内绑定页面渲染的数据，当输入框数据变化...
在vue中使用element-plus中的input,一次只能输入一字符
最新发布
h1753806379的博客
04-29 298
因为大意，导致element-plus中的input无法输入
element框架 el-table嵌套input 实现表单（pc端）
m0_73267676的博客
03-06 5068
1. el-table嵌套input的实际使用 2. 多选和单选的答案排版显示切换 3. v-model改变了但页面没渲染的解决方式
element-ui table 循环多个输入框无效
qq_38828542的博客
08-07 71
问题：element-ui table 循环或者tab循环中table里面的el-input 输入框无法输入 简化调试，循环的v-model中的变量换成data中常量就没问题，这说明动态循环的v-model变量并没有在data中定义(v-model变量问题) 结论，Vue 是数据型驱动模式，因此对应没有在全局或者局部定义的变量，会先出现不能监测的风险。 解决办法： 1、将template中循环的...
element el-table嵌套el-input ,且点击回车input焦点切换
m0_46348803的博客
03-17 1169
【代码】element el-table嵌套el-input ,且点击回车input焦点切换。
input 每输入一次都会失去焦点需要再次点击才能输入
大雾起了清晨
08-16 1909
input 每输入一次都会失去焦点需要再次点击才能输入
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
vue修改Element的el-table样式的4种方法
10-14
在示例中，`:header-cell-style="tableHeaderColor"`定义了一个名为`tableHeaderColor`的方法，用于改变表头行的样式。 4. **header-cell-style** 与header-row-style类似，header-cell-style专门用于表头单元格...
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤
element ui table表格嵌入输入框，输入框无法输入
qq_49519446的博客
04-02 4027
可以看到，图片上标出的输入框，此时是无法输入得， 附上代码 <el-table-column prop="number" label="数量" align="center" > <template slot-scope="scope"> <el-input v-model="scope.row.number" type="number" size="mini" placeholder="请输入内 容">&lt..
el-tabel嵌套input输入框，回车键跳转同一列下一行
han190427的博客
08-22 813
el-table-column label="名称">{ name: '张三', age: 20 },{ name: '李四', age: 25 },{ name: '王五', age: 30 }
el-table嵌入输入框
weixin_59213769的博客
01-13 4555
el-table嵌入输入框
el-table 中嵌入el-input 输入框无法输入问题（已解决）
蓝胖子的博客
07-20 4475
el-table 中嵌入el-input 输入框无法输入问题（已解决）
【前端学习日记】element-UI表格列嵌套输入框无法输入的情况
qq_54207312的博客
07-15 1798
啊啊啊，各位学习vue中的孩子们，你们一定会遇到的，就是表格里面嵌套表单元素，比如文本框或者数字框，然后你会发现，样式是没问题的，但是输入文本的时候，却不显示，仿佛被强制删除了。然后我看了自己的代码，发现表格的单元格实际上已经绑定了prop属性，通过prop的属性值我们可以在data中为其赋值，但当我们在内部再添加一个表单元素，表单元素的绑定又是一个属性值，虽然我们输入以后确实表单数据改变了，但是表格的数据却没有显示，中间仿佛差了一环。经过查阅许多大神的类似问题解决方案，事件啥的，不起作用。...
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
qq_45067263的博客
02-16 3251
解决方案： 提示：这里填写该问题的具体解决方案： 例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。 ...
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 1192
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
el-table嵌套el-input不能输入
12-13
el-table嵌套el-input不能输入的问题可能是由于以下原因导致的： 1. el-input组件没有绑定双向响应式数据(v-model)。 2. 组件嵌套太深还是该组件是一个坑(具体原因不清楚，只知道解决方法)。 解决方案如下： 1. 在data中定义一个变量，然后在el-input组件中使用v-model进行双向数据绑定，这样子就会解决el-input组件无法输入的问题了。 2. 将el-input组件放在el-table组件外部，或者使用其他组件代替el-input组件。 以下是两种解决方案的代码示例： 1. 在el-table中使用v-model进行双向数据绑定 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <el-input v-model="scope.row.age"></el-input> </template> </el-table-column> </el-table> ``` 2. 将el-input组件放在el-table组件外部 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> {{ scope.row.age }} </template> </el-table-column> </el-table> <el-input v-model="inputValue"></el-input> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值