1.汉字： 直接添加对应的 filterable
2.拼音： 穿梭框和选择器的实现方式有所不同
选择器：
<1>下载pinyin-match: npm i --save pinyin-match
<2>在main.js引入并注册为全局属性
import PinyinMatch from 'pinyin-match';
Vue.prototype.$pinyinmatch = PinyinMatch;
<3>为需要的选择器添加自定义过滤方法
:filter-method="PinyinMatchsq"
实现方法：
PinyinMatchsq(val) {
let PinyinMatch = this.$pinyinmatch;
if (val) {
let result = [];
this.salepreInfo.forEach(i => {
let m = PinyinMatch.match(i.username, val);
if (m) {
result.push(i);
}
});
this.salepreInfo = result;
} else {
this.salepreInfo = this.copysalepreInfo;
}
}
穿梭框：
因为穿梭框的匹配机制和选择器有所不同，因此采用其他方案解决。
<1>自己定义一个拼音库的js文件 pinyin.js：
链接： https://www.cnblogs.com/lzcblog/p/10642364.html
<2>实现将汉字转化为拼音以及拼音首字母组合的方法并放到一个js文件中 vue-py.js。
import pinyin from "./pinyin.js";
export default {
//转化为全拼音
chineseToPinYin: function(l1) {
var l2 = l1.length;
var I1 = "";
var reg = new RegExp("[a-zA-Z0-9]");
for (var i = 0; i < l2; i++) {
var val = l1.substr(i, 1);
var name = this.arraySearch(val, pinyin);
if (reg.test(val)) {
I1 += val;
} else if (name !== false) {
I1 += name;
}
}
I1 = I1.replace(/ /g, "-");
while (I1.indexOf("--") > 0) {
I1 = I1.replace("--", "-");
}
return I1;
},
//转化为首字母组合
CC2PYF: function(l1) {
var l2 = l1.length;
var I1 = "";
var reg = new RegExp("[a-zA-Z0-9- ]");
for (var i = 0; i < l2; i++) {
var val = l1.substr(i, 1);
var name = this.arraySearch(val, pinyin);
if (reg.test(val)) {
I1 += val;
} else if (name !== false) {
I1 += name.substring(0, 1);
}
}
I1 = I1.replace(/ /g, "-");
while (I1.indexOf("--") > 0) {
I1 = I1.replace("--", "-");
}
return I1;
},
arraySearch: function(l1, l2) {
for (var name in pinyin) {
if (pinyin[name].indexOf(l1) !== -1) {
return this.ucfirst(name);
}
}
return false;
},
ucfirst: function(l1) {
if (l1.length > 0) {
var first = l1.substr(0, 1).toUpperCase();
var spare = l1.substr(1, l1.length);
return first + spare;
}
}
};
<3>在穿梭框中绑定自定义的过滤方法
:filter-method="PinyinMatch"
在data中实现过滤方法
PinyinMatch(query, val) {
let result =
val.pinyin.indexOf(query) > -1 ||
val.deptUserName.indexOf(query) > -1 ||
val.jx.indexOf(query) > -1;
return result;
}