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;
}

最新文章

  1. 设置输入域(input/textarea)中文本光标的位置
  2. 利用iconv进行文件编码批量原地转换
  3. 第五章:javascript:队列
  4. 学渣告诉你,到底神马是傅里叶级数!转自 新浪@工程师style
  5. Linux学习笔记:CentOS安装MySQL
  6. 教程-Delphi第三方控件安装卸载指南
  7. Delphi基本图像处理代码
  8. c# 获取某个对象的[公有属性]的名称,类型,值
  9. Raw-OS互斥的源代码分析的量的Mutex
  10. 给负载均衡器添加多IP
  11. redis深入了解
  12. SpringBoot使用prometheus监控
  13. LY.JAVA面向对象编程.修饰符
  14. leetcode985
  15. Linux实验报告
  16. js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】
  17. Android 插件化 开发
  18. C# SignalR 即时通讯 聊天室
  19. Ngnix location匹配规则
  20. jenkins结合脚本实现代码自动化部署及一键回滚至上一版本

热门文章

  1. python excel 读写
  2. mysql执行sql脚本文件
  3. SQL SEVER 时间格式转换
  4. Unity 常用插件1
  5. 软件开发者路线图梗概&amp;书摘chapter7
  6. Java基础语法入门
  7. html2canvas将页面内容生成图片
  8. 下载jar包的网站
  9. centos7远程安装oracle11g R2详细教程-解决一切问题
  10. fragment滑动界面