Skip to content

在使用 vxe-table 与 Element UI 的 el-input 组件进行单元格编辑时,发现一个问题:如果启用了 mouse-config.selected,通过键盘导航或鼠标切换选中的单元格时,不会触发 el-input 的 blur 事件,导致预期的失焦处理逻辑未能执行。 #2864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 tasks done
YqngQB opened this issue Apr 10, 2025 · 3 comments
Labels
bug Something isn't working

Comments

@YqngQB
Copy link

YqngQB commented Apr 10, 2025

可复现的链接(必须为公开链接,仅包含能复现问题的示例代码):

https://stackblitz.com/edit/vitejs-vite-nzokd5ei?file=src%2FApp.vue

是否已准备好复现链接与示例代码?

  • 我确定已准备好以上复现链接

问题描述与截图:

  1. el-input 内部通过 addEventListener 绑定 blur 事件,而非直接在 元素上使用 @blur。,了减少维护者的BUG复现成本,我封装了一个简易的input-event组件模拟el-input
    2.点击单元格,进入编辑状态,显示 输入框,
    3.点击其他单元格或者使用tab键切换,期望输入框失去焦点,触发 blur 事件,结束编辑状态。

实际结果:

直接在 元素上使用 @blur 绑定事件时,行为符合预期。​

使用 addEventListener 动态绑定 blur 事件时,未触发事件处理。

可能的原因分析:

在使用 addEventListener 动态绑定事件时,事件监听器与 DOM 元素直接关联。当调用 handleClearEdit 并将 actived.row、actived.column 等置为 null 后,组件会重新渲染,将处于编辑状态的 替换为非编辑状态的展示内容。此时,原先绑定在该 上的事件监听器可能会失效,导致预期的 blur 事件未能触发。​

尝试的解决方案:

handleClearEdit 中,将 actived.args = null、actived.row = null、actived.column = null 等操作注释掉,或使用 setTimeout 延迟清除,发现 blur 事件能够正常触发。但不确定此操作是否会引发其他问题。​

疑问:

为什么直接在 元素上使用 @blur 绑定事件时,blur 事件能够正常触发,而通过 addEventListener 动态绑定时却不能?希望有大佬可以解答。

期望的结果:

无论使用何种方式绑定 blur 事件,输入框失去焦点后,都应触发相应的事件处理。

操作系统:

win10

浏览器版本:

chrome

vue 版本:

3.5

vxe-pc-ui 版本:

4.5.11

vxe-table 版本:

4.12.5

是否使用当前最新版本?

  • 我确定已经更新到最新版本后依然存在该问题
@YqngQB YqngQB added the bug Something isn't working label Apr 10, 2025
@xlz26296
Copy link
Contributor

要监听单元格关闭要使用表格的事件 edit-closed

@zkzgs
Copy link

zkzgs commented Apr 10, 2025

要监听单元格关闭要使用表格的事件 edit-closed

请问在渲染器内如何监听这个事件呢,因为渲染器的逻辑和业务组件一般是分开的

@zkzgs
Copy link

zkzgs commented Apr 10, 2025

我现在使用的是onVnodeBeforeUnmount来代替blur

YqngQB added a commit to YqngQB/vxe-table that referenced this issue Apr 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants