element plus table中双击编辑后回车和失去焦点绑定同一个事件会导致执行两次

原创 已于 2022-10-19 13:58:54 修改 · 593 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #开发语言 #typescript

于 2022-10-19 11:53:52 首次发布

一、场景复现

0、项目环境

  • VUE3
  • Vite
  • TypeScript
  • Element Plus

1、相关代码

原始代码

控制台打印两次执行信息

二、原因分析

回车时候执行了一次,然后input矿失去了焦点,再次触发了相同的事件

可能是TypeScript环境的问题,导致直接在回车事件中使用$event.target.blur报错.

三、解决办法

回车的事件重新绑定一个方法
绑定方法

方法中主动触发blur事件

blur触发

折腾半天,只能这样处理,如果有其他更方便的解决方式,请留言. 感谢~

使用 Vue3 Element Plus 实现el-table中的特定单元格编辑，下拉选择等
南七小僧的学海无涯
08-30 918
使用 Vue3 Element Plus 实现特定单元格编辑 在当今快节奏的应用程序开发世界中，数据编辑是至关重要的。Vue3 Element Plus 提供了一系列强大的组件，让开发者能够轻松创建交互式表格。其中一项关键功能是特定单元格编辑，它允许用户在表格中直接编辑数据。 本教程将逐步指导您如何在 Vue3 Element Plus 中实现特定单元格编辑功能。我们将涵盖从设置必要的依赖项到保存单元格更改的每个步骤。
【若依Java】15分钟玩转若依二次开发，新手小白半小时实现前后端分离项目，springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
编程小石头
06-29 7207
我们有时候用别人的框架，肯定想自定义一些样式，颜色，图案。接下来石头哥就带大家自定义下。项目中要到的图标，图片，背景图我给大家放到评论区了在后台的右上角，有一个入口。点击布局设置，就可以设置主题和颜色了如我们把深色侧边栏改为浅色侧边栏改变后如下改变颜色，如果我们想改变按钮的颜色，就修改下主题颜色即可。可以看出，我们按钮就从蓝色改为了橘黄色，当然你也可以改为别的颜色。其他几个选项可以自己根据需求配置。当然也可以恢复默认。
vue+element ui中操作table表格，双击实现行内编辑
weixin_40581358的博客
03-06 3365
最近开发项目，关于表格的数据操作比较多，这个地方个人觉得比较难搞，特此记录一下 如上图所示，双击行可以编辑，编辑取消的时候，这一行恢复为编辑前的数据，这个地方用到对象的浅拷贝，点击取消的时候可以拿到这一行数据（row），通过以下方法实现： //双击可编辑 cellClick(row) { this.$set(row, "show", true); row.hostRecord_cache = row.hostRecord; row.recordType_cac
vue 使用elementUI的input组件，失去焦点和按下回车键重复调用同一方法造成二次执行的问题
成遗憾的博客
07-28 3040
input组件失去焦点和按下回车键重复调用同一方法造成二次执行的问题
element-plus table组件，实现双击可编辑单元格，失去焦点，提交数据，支持下拉选择框选择。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-22 7195
vue3+element-plus在使用table组件时，实现双击可编辑单元格，单元格使用input，失去焦点或者回车后，提交table数据。同时支持下拉选择框选择。
ElementPlus表格排序后双击修改列，表格行发生变化
小七的博客
05-08 298
双击修改表格数据，显示输入框进行修改。但是表格排序后再次点击修改，行发生变化，显示输入框的行移动。具体原因猜测是触发了表格默认排序功能，目前没定位到具体原因。解决办法：双击修改表格列时，清空排序。
VUE3 + Element Plus el-button添加回车enter事件实现登录
huomore的博客
12-18 1449
el-input框绑定键盘回车搜索事件 加上@keydown.enter=“handleEnter()”
vue+element+Table 每行多个单元格双击修改
09-17
vue+elementTable每行多个单元格双击修改 绑定@cell-dblclick双击事件，显示input进行修改，失焦绑定@blur事件
element plus el-table 单元格可编辑
最新发布
03-08
嗯，用户想用Element Plus的el-table实现单元格可编辑功能。首先，我需要回忆一下Element Plus的文档和相关组件。记得el-table本身不直接支持可编辑单元格，但可以通过自定义模板和组件组合来实现。 首先，用户可能...
vue3 双击table 可编辑
01-21
为了在 Vue3 项目中创建一个支持双击单元格进入编辑模式的表格，可以采用如下方法。此方案利用 `v-model` 绑定数据源，并通过监听 `dblclick` 事件触发编辑逻辑。 #### 数据模型设计 首先定义好要展示的数据结构...
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
weixin_50041614的博客
09-03 1764
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
elementUI 输入框按回车刷新页面分析与解决
先知三日
06-29 2682
注意：如果你发现@keydown.enter.prevent在Element UI的组件中不起作用，那可能是因为组件内部实际上是一个包装了原生的组件，所以你需要使用.native修饰符来监听原生的keydown事件。而当你使用@keydown.enter.native.prevent时，你是在按键被按下的那一刻阻止了默认的表单提交行为，所以它能够有效地阻止表单的提交。在阻止表单提交的情况下，通常使用@keydown.enter更为有效。
element ui 中添加回车事件，input失去焦点
lifangfang0607的博客
12-08 6466
vue项目中使用了element ui，使用回车事件时加.native，写法如下： <el-input @keyup.enter.native="handleEnter($event)" v-model="scope.row.name" :value="scope.row.name"></el-input> ...
回车和失去焦点事件同时触发
年三十的博客
04-14 2551
使用element中新建标签的功能，按钮没隐藏，发现是因为keyup.enter和blur同时触发了 原因：绑定了两个触发方式，执行了两次 解决方法： @keyup.enter.native="$event.target.blur" 将回车事件指向当前元素的失去焦点事件即可！ ...
element ui 的el-input输入一个字后失去焦点，需重新点击输入框才能再次输入
qq_45067263的博客
05-27 2920
我是form表单嵌套表格，里面的el-input输入框，输入第一个值的时候会突然失去焦点，需要再次点击输入框才能正常输入，原因是table的key值，需要改成正常的index即可，如果你是循环的，也改为index就行。
ElementUI table表格组件实现双击编辑单元格失去焦点还原，支持多单元格
天天打码-16年老码农
02-20 1925
上源码：在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示。在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态，失去焦点时还原表格显示。
ElementPlus 或ElementUI搜索框添加回车监听刷新列表，结果回车后刷新了整个页面
我乃世间蓬蒿人
05-25 833
今天在项目中遇见一个bug，在此做记录，给大家提供思路。搜索栏进行搜索时，回车键本应该刷新数据列表，结果整个页面被刷新。
解决Element-plus 给el-input 添加回车事件会刷新页面的问题
qq_58633408的博客
01-31 1598
组件默认情况下，按下回车键会触发表单的提交，而表单的提交会触发页面的刷新。这是浏览器默认行为。@submit.prevent 就可以阻止浏览器刷新页面的默认行为，问题就成功解决啦！解决之后,按下回车，就出发了正则验证，没有刷新页面。然后就按下回车就导致了页面刷新。
element-UI+VUE 实现el-table双击单元格编辑
weixin_44885243的博客
04-09 5541
vue文件代码: <template> <div class="content-wrapper"> <div class="card-body"> <el-table height="600px" :data="tableData" border stripe style="width: 100%"> <el-table-column :show-overflow-tooltip="true" align="c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值