需求:用户要求打出首字母就能搜索到内容,而不是打汉字。
需求分析: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变化就会导致这个情况,去掉即可。