Bug描述:

  今天做开发时遇到一个elementUI存在的bug。

  当el-select使用filterable功能搜索时,如果你恰巧使用的是微软拼音输入法,那么你有可能会遇到搜索结果和输入的值不匹配,如下图:

我输入的是黄金,结果却显示有双皮蛋,龙须面。


复现办法:

  1. 打开https://element.eleme.cn/#/zh-CN/component/select
  2. 定位到【可以利用搜索功能快速查找选项】
  3. 切换成微软拼音输入法
  4. 点击搜索下拉框输入“黄金”,确认输入时别使用回车或者空格确认,而使用键盘数字选择确认输入。比如按“1”确认输入“黄金”
  5. 这时候下拉结果并未更新成只包含黄金的选择项

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解决办法的更多相关文章

  1. 关于element-ui select组件change事件只要数据变化就会触发的解决办法

    使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中 ...

  2. zencart产品属性dropmenu select只有一个选择项时自动变成radio单选的解决办法

    includes\modules\classic\attributes.php 在大约786行代码 case ($products_options->RecordCount() == 1): 的 ...

  3. 新版Sublime text3注册码被移除的解决办法

    Sublime Text是风靡世界的文本编辑器,支持多种编程语言,启动时间短,打开文件速度快,插件丰富,让很多程序员爱不释手.但是,对于未注册的Sublime Text, 经常在保存的时候会弹出一个烦 ...

  4. element-UI select 踩过的坑和解决办法

    今天遇到了一个bug,就是在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态.可以看到select框还是处于颜色 ...

  5. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  6. [经验] 新版SkyIAR、Easy Image X在有些PE里不能运行的解决办法

    [经验] 新版SkyIAR.Easy Image X在有些PE里不能运行的解决办法 xxwl2008 发表于 2013-1-26 11:58:38 https://www.itsk.com/threa ...

  7. 新版Chrome自动禁用第三方插件的解决办法[转]

    原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...

  8. access数据库select查询top时无效的解决办法

    access数据库select查询top时有时无效,原因就是在使用Order by时,且排序的条件中数据有重复的. 比如:select top 10 * from table1 order by cd ...

  9. <s:select>下拉框是空白的解决办法

    首先,定义了一个Department的JavaBean对象如下 DAO.java 在一个Action类Employee.java中将depts放入requestMap中 最后,在index.jsp里定 ...

随机推荐

  1. 如何修改git上传代码的作者姓名

    随着IT行业的不断壮大,开源的东西越来越多,使用git来进行代码管理的人自然也越来越多,而且很多人的git账户都不是自己的本人名字,但是在公司工作的时候为了遇到问题能够定位责任人和便于区分提交人,通常 ...

  2. 『题解』Codeforces1142A The Beatles

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description Recently a Golden Circle of Beetlovers ...

  3. 产品分析:华为短信APP体验的问题和建议

  4. 领扣(LeetCode)字符串相加 个人题解

    给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和num2 都不包 ...

  5. 学习记录:《C++设计模式——李建忠主讲》5.“对象性能”模式

    对象性能模式:面向对象很好地解决了抽象地问题,但是必不可免地要付出一定地代价.对于通常情况来讲,面向对象地成本大都可以忽略不计,但某些情况,面向对象所带来地成本必须谨慎处理. 典型模式:单件模式(Si ...

  6. Linux菜鸟——常见命令一 查看及创建目录文件等命令

    命令行提示符 [root@localhost ~]# [当前用户名@主机名 当前所在目录]$ linux 超级用户 root window 超级用户 administartor # 超级用户 $ 普通 ...

  7. Java描述设计模式(23):访问者模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 电竞是游戏比赛达到"竞技"层面的体育项目.利用电子设备作为运动器械进行的.人与人之间的智力对抗 ...

  8. eNSP仿真软件之配置Trunk口

    实验原理 在以太网中,通过划分VLAN来隔离广播域和增强网络通信的安全性.以太网通常由多台交换机组成,为了使VLAN的数据帧跨越多台交换机传递,交换机之间互连的链路需要配置为干道链路(Trunk Li ...

  9. 程序员需要掌握的七种 Python 代码更易维护的武器

    检查你的代码风格 PEP 8 是 Python 代码风格规范,它规定了类似行长度.缩进.多行表达式.变量命名约定等内容.尽管你的团队自身可能也会有稍微不同于 PEP 8 的代码风格规范,但任何代码风格 ...

  10. 2019-9-23:渗透测试,基础学习,http协议数据包的认识,html css的认识,笔记

    Burp suite功能模块Dashboard:扫描Proxy:拦截包,代理 drop:放弃Intruder:爆破Decoder:编码,解码repeater:重放comparer:比较 BP,prox ...