Element UI 多选搜索实现拼音匹配

转载，感谢原博主，自己也做个记录。
确实好用，增加了对拼音的匹配

需要使用 js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar 就可以安装使用啦，详细的使用 CnChar 文档里有介绍。
-过滤方法使用 CnChar 提供的 .spell方法可以获取拼音数组。

代码：


import cnchar from "cnchar"
————————————————————————————————————————————mounted() {//保留数据源this.copy = Object.assign(this.options);},
————————————————————————————————————————————filterFunction(val) {//对绑定数据赋值  teacher_id  teacher_namethis.teacherList = this.copy.filter((item) => {//如果直接包含输入值直接返回trueif (item.teacher_name.indexOf(val) !== -1) return true;// 如果输入的是汉字则按组件默认逻辑进行匹配let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");if(reg.test(val)){console.log('是汉字')return}//将label拆散成小写拼音数组let arr = item.teacher_name.spell('low', 'array');//拼接成完整label的拼音let spell = arr.join('');//lengths 是label完整拼音 中每个汉字第一个拼音字母的index值的数组let lengths = [0];for (var i = 0; i < arr.length - 1; i++) {lengths.push(lengths[i] + arr[i].length);};//判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值return lengths.indexOf(spell.indexOf(val)) !== -1;})

Element UI 多选搜索实现拼音匹配相关推荐

easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找
解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找参考文章: (1)解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找 (2)https://ww ...
element ui表格data搜索重置功能
element ui表格搜索重置功能本地 1.html <el-input v-model.trim="inputname"></el-input> &l ...
element ui 中el-input搜索输入框或者普通输入框无法输入的问题讨论
下面来说一下网友的方法,方法如下:(不赞同) 最近发现项目中需要输入内容的时候,input框有时候会无法输入进去发现elementUI中@input事件可以拿到当前输入的值, 问题找到了,视图没有更 ...
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）
效果预览实现思路 data中定义 selectedList 数组保存选中的数据在页面初次渲染.翻页.切换每页数据数量等每次重新获取表格数据渲染表格时,都根据 selectedList 勾选表格中已 ...
element ui select 远程搜索选中之后清空输入框
第一步: 第二步:
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...

Element UI 多选搜索实现拼音匹配

Element UI 多选搜索实现拼音匹配相关推荐

最新文章

热门文章