Happy-Coding-Clans / vue-easytable

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
https://happy-coding-clans.github.io/vue-easytable/
MIT License
3.63k stars 725 forks source link

[Bug Report] 单元格编辑结合 element-ui的示例中 InputNumber 计数器的输入框是只能输入内容或者替换 但是无法快捷键backspace回退删除 #536

Open qinhualian opened 1 year ago

qinhualian commented 1 year ago

选择要提交 issue 的库

vue-easytable

Issue 类型

Bug

Issue 标题

单元格编辑结合 element-ui的示例中 InputNumber 计数器的输入框是只能输入内容或者替换 但是无法快捷键backspace回退删除

仓库版本

v2.21.9

Vue 版本

vue2

浏览器

Chrome

系统类型

Windows

重现链接

https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-edit

重现步骤

输入框也只能输入内容或者全选替换 但是无法用backspace删除

期望的结果是什么?

正常输入删除

实际的结果是什么?

输入框也只能输入内容或者替换 但是无法用快捷键backspace删除

补充说明(可选)

感觉是因为快捷键backspace键与excel保持同步所以无法在编辑时使用了 在所有要用到element-ui输入框的地方不能删除 比如自定义结合一个数值输入框 或者结合el-select的搜索功能的输入框也不行

huangshuwei commented 1 year ago

感谢你的反馈,这个问题我需要定位下

CTINT-Distribution commented 1 year ago

We have similar issues like this. We have found out that it is the preventdefault() in dealKeyDownEvent() has blocked the key down event from passing to custom component in the cells.

278949501 commented 1 year ago

同样的问题,希望作者能修复一下

qinhualian commented 1 year ago

你好 这个问题还在修复中吗

crushh commented 1 year ago

同样遇到这个问题,希望修复下

huangshuwei commented 11 months ago

抱歉,这个问题一直没找到很好的解决方案去兼容组件与第三方库表单的冲突问题。

现在有个方案:如果需要结合使用第三方表单,建议禁用组件的单元格选择功能。这样组件本身的快捷键将被禁用。禁用单元格选择可以通过以下方式:

cellSelectionOption: {
       // default true
       enable: false,
}

这是示例:https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-edit?anchor=combine-element-ui

tanxuxu commented 10 months ago

作者您好,在使用easytable后整个工程的input组件都受了影响,无法删除,我们就是因为能选单元格选择了easytable的,也确实需要选中单元格的操作,换言之不能禁用,希望作者能解决一下,真的很急

tanxuxu commented 10 months ago

您的邮件我已经查收,我会尽快给您回复

MarkTang3611 commented 10 months ago

抱歉,这个问题一直没找到很好的解决方案去兼容组件与第三方库表单的冲突问题。

现在有个方案:如果需要结合使用第三方表单,建议禁用组件的单元格选择功能。这样组件本身的快捷键将被禁用。禁用单元格选择可以通过以下方式:

cellSelectionOption: {
       // default true
       enable: false,
}

这是示例:https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-edit?anchor=combine-element-ui

大佬,你好,在使用了easytable 之后,整个工程其他界面的输入框也受到了影响,只能输入不能删除,而且按上下左右键还会失去焦点等情况,麻烦加急处理一下,谢谢了!项目也是需要选中单元格的操作,不可禁用。

huangshuwei commented 10 months ago

抱歉,这个问题一直没找到很好的解决方案去兼容组件与第三方库表单的冲突问题。 现在有个方案:如果需要结合使用第三方表单,建议禁用组件的单元格选择功能。这样组件本身的快捷键将被禁用。禁用单元格选择可以通过以下方式:

cellSelectionOption: {
       // default true
       enable: false,
}

这是示例:https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/cell-edit?anchor=combine-element-ui

大佬,你好,在使用了easytable 之后,整个工程其他界面的输入框也受到了影响,只能输入不能删除,而且按上下左右键还会失去焦点等情况,麻烦加急处理一下,谢谢了!项目也是需要选中单元格的操作,不可禁用。

@MarkTang3611 为什么会影响其他界面的功能,键盘操作只会影响到当前表格组件:https://github.com/Happy-Coding-Clans/vue-easytable/blob/master/packages/ve-table/src/index.jsx#L1401