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" 即可。
<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替换到老版本的文件就大功告成啦。
elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法的更多相关文章
- 关于element-ui  select组件change事件只要数据变化就会触发的解决办法
		
使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...
 - zencart产品属性dropmenu select只有一个选择项时自动变成radio单选的解决办法
		
includes\modules\classic\attributes.php 在大约786行代码 case ($products_options->RecordCount() == 1): 的 ...
 - 新版Sublime text3注册码被移除的解决办法
		
Sublime Text是风靡世界的文本编辑器,支持多种编程语言,启动时间短,打开文件速度快,插件丰富,让很多程序员爱不释手.但是,对于未注册的Sublime Text, 经常在保存的时候会弹出一个烦 ...
 - element-UI select 踩过的坑和解决办法
		
今天遇到了一个bug,就是在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态.可以看到select框还是处于颜色 ...
 - Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值
		
目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...
 - [经验] 新版SkyIAR、Easy Image X在有些PE里不能运行的解决办法
		
[经验] 新版SkyIAR.Easy Image X在有些PE里不能运行的解决办法 xxwl2008 发表于 2013-1-26 11:58:38 https://www.itsk.com/threa ...
 - 新版Chrome自动禁用第三方插件的解决办法[转]
		
原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...
 - access数据库select查询top时无效的解决办法
		
access数据库select查询top时有时无效,原因就是在使用Order by时,且排序的条件中数据有重复的. 比如:select top 10 * from table1 order by cd ...
 - <s:select>下拉框是空白的解决办法
		
首先,定义了一个Department的JavaBean对象如下 DAO.java 在一个Action类Employee.java中将depts放入requestMap中 最后,在index.jsp里定 ...
 
随机推荐
- 通过ISO镜像简单搭建本地yum仓库
			
本文参考链接:https://segmentfault.com/a/1190000015155966 *有时候在我们本地搭建一些Linux上的程序运行环境或者安装一些软件的时候,难免会遇到需要使用yu ...
 - Hadoop3.2.1版本的环境搭建
			
最近有人提出能不能发一些大数据相关的知识,No problem ! 今天先从安装环境说起,搭建起自己的学习环境. Hadoop的三种搭建方式以及使用环境: 单机版适合开发调试: 伪分布式适合模拟集群学 ...
 - Project Euler 59: XOR decryption
			
计算机上的每个字母都对应一个独特的编号,普遍接受的标准是ASCII(美国信息交换标准代码).例如,大写字母的A的ASCII码是65,星号(*)的ASCII码是42,而小写字母k的代码是107. 一种现 ...
 - jquery.eraser制作擦涂效果
			
jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...
 - jquery序列帧播放(支持视频自动播放和不是全屏播放)
			
jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡.. ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片 尺寸适当的可以压小点<pre> < ...
 - jquery翻页turnjs简单实例
			
jquery翻页turnjs简单实例<pre><div id="flipbook"> <div class="hard" styl ...
 - idea用hibernate创建一个表两个主键时遇到的问题
			
1>> idea功能简单,最大化的实现傻瓜式操作,不需要像eclipse一样手敲代码,尤其是在创建主键多个或者主键映射时. 2>> (1).首先,idea创建复合主键映射时,需 ...
 - Groovy单元测试框架spock数据驱动Demo
			
spock是一款全能型的单元测试框架. 上次文章分享了spock框架的基础功能的使用,在此基础上,我根据自己写的Groovy的封装方法.数据驱动以及一些Groovy的高级语法做了一些尝试.发现还是有一 ...
 - nyoj 17-单调递增最长子序列  &&  poj 2533(动态规划,演算法)
			
17-单调递增最长子序列 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:21 submit:49 题目描述: 求一个字符串的最长递增子序列的长度 如 ...
 - 0MQ是会阻塞的,不要字面上看到队列就等同非阻塞。
			
如果你是希望通过0MQ来做缓冲队列,非阻塞的效果,那你就必须清楚 0MQ Socket是会阻塞,你要搞清楚0MQ Socket与队列的关系. 官方协议文档规定了,一部分类型的 0MQ Socket为不 ...