关于在el-table中自定义内容时引用el-input输入框的bug

已于 2023-07-10 17:00:34 修改
阅读量755 收藏
点赞数 5
文章标签： bug vue.js elementui
于 2023-07-10 16:59:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45419863/article/details/131494033
版权

由于项目中需要实现在table的表头是从接口动态获取的，然后个别的列可以更改值的功能，所以便用element的table组件来实现需求

我的思路是用el-table中的scope插槽自定义列来实现，然后用el-input组件来双向绑定输入的值，submit后就可以调用后台的保存api来完成数据提交。
但是等我写完之后发现我的el-input输入值时没有任何反应，打了console之后发现只有@input可以触发，@change事件怎么也触发不了。。。。

然后经过各种百度，gpt寻找答案后依旧没能解决问题，当时灵机一动既然el-input无法达到我的要求，那就用原生input试试吧

没想到竟然可以了，change事件也可以调用了，想了想可能是element在做二次封装的时候在动态表头的时候需要用到什么特殊的属性，但是我没找到。但是使用原生input就没问题了，记录一下，也希望能帮到遇到和我类似问题的朋友们做参考
vue中通过el-input与el-table相结合，实现从表格中选择数据
追梦i
10-15 1409
源码： <el-input v-model="form.catalog" @click.native="onclick" placeholder="请选择目录" name="catalog"></el-input> <div id="divForm" style="display: none"> <el-table id="table12" border
关于一些bug的解决1、el-input的输入无效2、搜索之后发现数据不对3、el多选框、单选框点击无用4、
m0_56666791的博客
11-22 1579
其实这几种报错内核就是一个数组在处理的时候自身也在改变 并不是处理之后赋值给其他数组就完事 其实原先的数组也会改变这对数据查询以及节约代码量又很好的指导这种报错出现的时候一定要回看自己的数据格式是否有问题，寻找别人的方法 或者是查看报错信息../../assets/svg/搜索.svg。
el-table用上下键控制表格内输入框选中
Humor_L的博客
04-18 839
2，在开发中给el-input加了@keydown.arrowup.native事件，然后console,怎么也监听不到，用了一下方法，键盘每个按键，在按下的的时候都会有不同的值，通过值来判断按下的哪个键进行监听。当某一行没有输入框，或者第一行、最后一行应该进行判断，返回最上层或者最下层还是不在对键盘进行监听。1、需求是在使用表格时（用el-table举例），表格内有输入框，需要用上下左右键来切换到上下行输入框。
收集el-table中的el-input数据
Dzb1993的博客
05-23 911
使用作用域插槽，将 row.属性名 绑定到你要使用的属性身上即可 （row就是当前行，将input 双向绑定到row的属性上） 这样就可以实现 ：在input中输入数据，即可收集到对应的属性上 ...
关于饿了吗 el-table 固定列，出现表头行高错误，导致错位的问题
qq_42847304的博客
10-20 1629
在 我们原本 table 表格 渲染出来的时候，又自动生成了一个，新的 fixedtable 也就是用来 展示 固定列的table ，并且 这两个 table 表格，在一定程度上是重合在一起的（fixed table 在 原本 table的上方），fixedtable 通过 只渲染 我们选为 固定列的 列。当然，我知道自己的知识储备还很浅薄，也有可能解决这个问题方法的原理，并不是我所想的那样，希望路过的各位前辈大佬能够给予我指正。我会及时改正并学习积累。
ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题
cd_yang2017的博客
03-08 2380
el-table组件中嵌入el-input输入框无法获取焦点，无法编辑。可使用父元素监听方式获取焦点。
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4709
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项
pzlzyi的博客
03-08 2395
问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项 公司项目需求两个input表单校验选填一个，看了下el-form发现只能做单个校验，纠结了老半天，突然想到看能不能用vue提供的$refs获取一下dom元素，果然有效，话不多说上代码。 template <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="20%"> <el-row :gutter="24"
el-table中添加一行进行表单的验证
Duan_hs的博客
01-13 2342
在表格中进行表单校验
Element UI实现动态表格（输入框和选择框），可使用快捷键tab、Enter、Down、Up进行切换格子
Linzsong的博客
04-19 3073
Element UI实现动态表格 1. 实现效果 话不多说，直接上图 图1（整体效果） 图2（动态图） 图3（Tab 和 Enter切换下一格） 图4（Up和 Down 对input框进行上下切换） 2. 核心代码实现 首先是要获取格子的index和列prop(唯一值)，获取的方法可以看这个 element UI 在table中获取点击当前行列索引 激活input和select是通过table的rowIndex和列prop(唯一值)来定位判断点击的为哪一个格子 ...
element el-table嵌套el-input ,且点击回车input焦点切换
m0_46348803的博客
03-17 1486
【代码】element el-table嵌套el-input ,且点击回车input焦点切换。
VUE2 element-table里添加输入框并添加限制条件:只能是数字或者非负数
weixin_47194802的博客
10-11 1657
一般校验是加到表单里 的，我在表格外面尝试过加form表单，但是不太好用，因为我要做的是这个输入框只能输入正数和小数，不能汉字和字母负数，所以我就直接给输入框加了验证规则。关于在表格里面放输入框，并且给输入框加限制条件。虽然没有红色提示，但是直接过滤掉了非数字和负数。1、需要加验证的列 ，放上下面两句。
el-table嵌入输入框
weixin_59213769的博客
01-13 4875
el-table嵌入输入框
el-table 表格双击变成el-input框且聚焦，input框验证出错后聚焦
yh8899abc的博客
05-26 2594
效果图 before： after： 实现： HTML部分 <el-row :gutter="20" class="kong"> <el-table :data="prototypes" style="width: 100%;"> // 序号栏目 type="index" <el-table-column type="index" label="序号" width="100"></el-table-column>
el-table中嵌入el-input无法输入
weixin_46410488的博客
05-31 1224
今天工作时需要在表格中嵌入输入框，在表格打开时将数据回显到输入框中使其可以修改，但发现输入框的值回显过后就无法修改，用来一天时间终于解决了，在此记录一下。在确定html没有问题后我检查了回显赋值时的代码。感觉是因为双向绑定没有生效，然后就看到了这篇文章。一下就明白了之后将回显赋值代码改成这样就ok了。
el-table 列表里包含输入框，输入值是出现卡顿问题，可以把输入框单独提取出来
最新发布
徐同保的专栏
08-22 818
el-table 列表里包含输入框，输入值是出现卡顿问题，可以把输入框单独提取出来
el-table 中嵌入el-input 输入框无法输入问题（已解决）
蓝胖子的博客
07-20 6144
el-table 中嵌入el-input 输入框无法输入问题（已解决）
vue element el-table组件，当合并行（span-method）和多选一起使用时，可能会出现实际选中的行不是自己能看见的预想的行
html_tangkai的博客
09-08 2367
先看两个图 图1：为什么下面都没选，上面全选框是半选状态操作步骤： 1.点全选 2.手动取消这两行的勾选 图2：为什么下面都选了，上面全选框也是半选状态 操作步骤： 1.手动勾选这两行 如上图所示，el-table组件合并行和多选一起使用，可能会出现实际选中的行不是自己能看见的预期的行，从而导致一些BUG 图1原因分析： 这里赋值给table的数据是一个有三个对像数组，然后有两行合成了一行，当点全选时，会选中这三行的数据（虽然页面上只显示了两行），然后我手动把两个都取消勾选，但实际上还是有一行数据处于选中状
element框架 el-table嵌套input 实现表单（pc端）
m0_73267676的博客
03-06 5808
1. el-table嵌套input的实际使用 2. 多选和单选的答案排版显示切换 3. v-model改变了但页面没渲染的解决方式
el-table el-table-column使用自定义指令
04-18
el-table和el-table-column是Element UI库中的两个组件，用于展示表格数据。自定义指令可以用于对el-table和el-table-column进行扩展和定制。 对于el-table，可以使用自定义指令来实现一些特定的功能，比如自定义排序、拖拽列宽、固定表头等。通过自定义指令，可以在el-table上添加一些额外的行为或样式。 对于el-table-column，可以使用自定义指令来实现一些特定的列样式或行为。比如，可以通过自定义指令来实现某一列的特殊渲染、列宽自适应等功能。 下面是一个示例，展示如何使用自定义指令来扩展el-table和el-table-column： 1. 创建一个自定义指令： ```javascript Vue.directive('my-directive', { bind: function (el, binding, vnode) { // 在绑定时执行的逻辑 // 可以在这里修改el-table或el-table-column的行为或样式 }, inserted: function (el, binding, vnode) { // 在元素插入到DOM时执行的逻辑 }, update: function (el, binding, vnode, oldVnode) { // 在组件更新时执行的逻辑 }, componentUpdated: function (el, binding, vnode, oldVnode) { // 在组件更新完成后执行的逻辑 }, unbind: function (el, binding, vnode) { // 在解绑时执行的逻辑 } }); ``` 2. 在el-table或el-table-column上使用自定义指令： ```html <el-table v-my-directive> <!-- 表格内容 --> </el-table> <el-table-column v-my-directive> <!-- 列内容 --> </el-table-column> ``` 通过上述方式，你可以根据自己的需求来扩展和定制el-table和el-table-column的行为和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值