尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

解决 vxe-table 全键盘操作编辑单元格时,如果是中文拼音输入法时,解决首字母丢失问题

解决 vxe-table 全键盘操作编辑单元格时,如果是中文拼音输入法时,解决首字母丢失问题 背景与问题描述在后台管理系统中可编辑表格是高频交互场景。我们基于 vxe-tableVue 生态中功能最强大的表格组件之一实现了全键盘操作的单元格编辑功能用户无需鼠标即可快速录入数据。上线后收到反馈当系统切换至五笔输入法/中文拼音输入法如搜狗、微软拼音、小狼毫等时通过键盘快捷键如 Enter激活单元格编辑后输入的第一个字母拼音首字母无法触发中文候选词框直接以英文字母形式被输入到单元格中必须手动删除后重新输入极大影响录入效率。而英文输入法下一切正常所有按键事件均能正确响应。原因分析该问题根源在于 vxe-table 早期版本对 组合输入Composition事件的处理存在缺陷。浏览器中中文输入法输入时会触发 compositionstart → input → compositionend 事件序列。旧版 vxe-table 在单元格进入编辑状态后直接监听 keydown / input 事件进行内容同步但没有正确处理 composition 状态。当用户按下第一个字母键如 n时输入法尚未弹出候选框keydown 被组件拦截并直接写入单元格导致该字母被“提前消费”输入法丢失该次输入候选词无法唤起。新版通过内部状态机管理优化从而完美兼容 IME输入法编辑器。解决方案升级 vxe-table 到最新版本官方已在 v3.23v4.21 后修复该问题。版本对比与升级建议代码templatedivvxe-gridv-bindgridOptions/vxe-grid/div/templatescriptsetupimport{reactive}fromvueconstgridOptionsreactive({border:true,showOverflow:true,height:500,mouseConfig:{selected:true},keyboardConfig:{isEdit:true,isArrow:true,isEnter:true,isTab:true,isDel:true,isBack:true,isEsc:true},editConfig:{trigger:dblclick,mode:cell},columns:[{type:seq,width:70},{field:name,title:Name,editRender:{name:VxeInput}},{field:sex,title:Sex,editRender:{name:VxeInput}},{field:age,title:Age,editRender:{name:VxeInput}},{field:date,title:Date,editRender:{name:VxeDatePicker}}],data:[{id:10001,name:Test1,role:Develop,sex:Man,age:28,address:test abc,date:},{id:10002,name:Test2,role:Test,sex:Women,age:22,address:Guangzhou,date:},{id:10003,name:Test3,role:PM,sex:Man,age:32,address:Shanghai,date:},{id:10004,name:Test4,role:Designer,sex:Women,age:23,address:test abc,date:},{id:10005,name:Test5,role:Develop,sex:Women,age:30,address:Shanghai,date:},{id:10006,name:Test6,role:Designer,sex:Women,age:21,address:test abc,date:},{id:10007,name:Test7,role:Test,sex:Man,age:29,address:test abc,date:},{id:10008,name:Test8,role:Develop,sex:Man,age:35,address:test abc,date:},{id:10009,name:Test9,role:Test,sex:Man,age:26,address:test abc,date:},{id:10010,name:Test10,role:Develop,sex:Man,age:38,address:test abc,date:},{id:10011,name:Test11,role:Test,sex:Women,age:29,address:test abc,date:},{id:10012,name:Test12,role:Develop,sex:Man,age:27,address:test abc,date:},{id:10013,name:Test13,role:Test,sex:Women,age:24,address:test abc,date:},{id:10014,name:Test14,role:Develop,sex:Man,age:34,address:test abc,date:},{id:10015,name:Test15,role:Test,sex:Man,age:21,address:test abc,date:},{id:10016,name:Test16,role:Develop,sex:Women,age:20,address:test abc,date:},{id:10017,name:Test17,role:Test,sex:Man,age:31,address:test abc,date:},{id:10018,name:Test18,role:Develop,sex:Women,age:32,address:test abc,date:},{id:10019,name:Test19,role:Test,sex:Man,age:37,address:test abc,date:},{id:10020,name:Test20,role:Develop,sex:Man,age:41,address:test abc,date:}]})/script效果验证升级后无论使用何种中文输入法激活编辑并输入拼音时候选框正常弹出首字母不再丢失。中英文输入切换流畅编辑体验与原生输入框一致。如果您也遇到同类问题直接升级到最新版本即可彻底解决无需额外代码适配。更多高级键盘交互配置可参考官方文档。https://vxetable.cn
返回列表