elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法
Bug描述:
今天做开发时遇到一个elementUI存在的bug。
当el-select使用filterable功能搜索时,如果你恰巧使用的是微软拼音输入法,那么你有可能会遇到搜索结果和输入的值不匹配,如下图:
我输入的是黄金,结果却显示有双皮蛋,龙须面。
复现办法:
- 打开https://element.eleme.cn/#/zh-CN/component/select
- 定位到【可以利用搜索功能快速查找选项】
- 切换成微软拼音输入法
- 点击搜索下拉框输入“黄金”,确认输入时别使用回车或者空格确认,而使用键盘数字选择确认输入。比如按“1”确认输入“黄金”
- 这时候下拉结果并未更新成只包含黄金的选择项
bug定位与修复办法:
项目周五要上线,只能自己下载element源码,排查问题了。定位到:element-dev\packages\select\src\select.vue代码,npm run dev浏览器调试起来。
发现当使用微软输入法时,按上面的数字选择键并不会触发@keyup.native事件。而el-select里面的el-input并未使用@input事件监听输入值变化导致bug。
修复方法:el-input中加入@input="debouncedOnInputChange" 即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | < el-input ref="reference" v-model="selectedLabel" type="text" :placeholder="currentPlaceholder" :name="name" :id="id" :autocomplete="autoComplete || autocomplete" :size="selectSize" :disabled="selectDisabled" :readonly="readonly" :validate-event="false" :class="{ 'is-focus': visible }" :tabindex="(multiple && filterable) ? '-1' : null" @focus="handleFocus" @blur="handleBlur" @keyup.native="debouncedOnInputChange" @input="debouncedOnInputChange" @keydown.native.down.stop.prevent="navigateOptions('next')" @keydown.native.up.stop.prevent="navigateOptions('prev')" @keydown.native.enter.prevent="selectOption" @keydown.native.esc.stop.prevent="visible = false" @keydown.native.tab="visible = false" @paste.native="debouncedOnInputChange" @mouseenter.native="inputHovering = true" @mouseleave.native="inputHovering = false"> < template slot="prefix" v-if="$slots.prefix"> < slot name="prefix"></ slot > </ template > < template slot="suffix"> < i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></ i > < i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" @click="handleClearClick"></ i > </ template > </ el-input > |
我已经给官方提issue了,再官方没解决之前,大家可以按上述办法自行解决一下,然后npm run dist重新生成一下引用代码,再将lib下的index.js和index.css替换到老版本的文件就大功告成啦。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?