900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Element-UI下拉框select实现拼音搜索

Element-UI下拉框select实现拼音搜索

时间:2019-12-25 01:40:30

相关推荐

Element-UI下拉框select实现拼音搜索

需求:用户要求打出首字母就能搜索到内容,而不是打汉字。

需求分析:element自带搜索功能,支持汉字搜索,拼音的话需要引入第三方插件了。经过实验pinyin-match完美实现。

解决过程:

首先安装npm install pinyin-match --save

全局引用和局部引用皆可,这里我们使用了局部引用

import pinyin from "pinyin-match";

给select标签添加filterable :filter-method="pinyingMatch"

添加自定义搜索方法

pinyingMatch(val) {var that = thisconst pinyingMatch = require("pinyin-match");if (val) {var result = [];////注意otherList是内容数组,根据自己项目修改that.otherList.forEach((e) => {//注意,e.employeeName是遍历数组之后的键,按需修改var m = pinyingMatch.match(e.employeeName, val);// console.log(m);if (m) {result.push(e);}});//搜索到相应的数据就把符合条件的n个数据赋值brandthat.otherList = result;} else {//没有搜索到数据,就还展示所有的brand//copyotherList也是内容数组,为了显示全部,需要添加进之前的内容that.otherList = that.copyotherList;}}

成功解决。

发现了一些BUG:elementUI的下拉选择,每次点击×删除之后,v-model绑定的数据没有删除,所以要添加@clear方法,将data清空,同时把otherList还原。

又出现了Bug,每次输入拼音字母,输入框的字母都会消失,这是由于v-for遍历数组时加入了Index,每次Index变化就会导致这个情况,去掉即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。