elementUI的 tree搜索过滤，可识别拼音，且不区分大小写

1.首先需要安装
js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。

<el-inputplaceholder="输入标题进行过滤"v-model="filterText">
</el-input><el-treeclass="filter-tree":data="data":props="defaultProps":filter-node-method="filterNode"ref="tree">
</el-tree><script>export default {watch: {filterText(val) {this.$refs.tree.filter(val);}},methods: {filterNode(value, data) {if (!value) return true;if (data.label.indexOf(value) !== -1) return true;// 匹配小写let arr = data.label.spell('low', 'array');let spell = arr.join('');let lengths = [0];for (var i = 0; i < arr.length - 1; i++) {lengths.push(lengths[i] + arr[i].length);};//判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值if(lengths.indexOf(spell.indexOf(value)) !== -1) return true// 大写let arrUp = data.label.spell('up', 'array');let spellUp = arrUp.join('');let lengthsUp = [0];for (var i = 0; i < arrUp.length - 1; i++) {lengthsUp.push(lengthsUp[i] + arrUp[i].length);};return lengthsUp.indexOf(spellUp.indexOf(value)) !== -1;}},data() {return {filterText: '',data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

elementUI的 tree搜索过滤，可识别拼音，且不区分大小写相关推荐

Elasticsearch高级搜索排序（中文+拼音+首字母+简繁转换+特殊符号过滤）(示例代码)
简介这篇文章主要介绍了Elasticsearch高级搜索排序( 中文+拼音+首字母+简繁转换+特殊符号过滤)(示例代码)以及相关的经验技巧,文章约21106字,浏览量320,点赞数5,值得参考! ...
querybuilder 排序_Elasticsearch高级搜索排序（中文+拼音+首字母+简繁转换+特殊符号过滤）...
一.先摆需求: 1.中文搜索.英文搜索.中英混搜如:"南京东路","cafe 南京东路店" 2.全拼搜索.首字母搜索.中文+全拼.中文+首字母混搜如 ...
UITextField实现过滤选中状态拼音
先提供下简书地址, 排版更好. 我的简书地址: http://www.jianshu.com/p/80e79c6d1511 UITextField相信很多的iOS开发者都会经常用到, 最近项目中遇到了 ...
elementUI的表格搜索和删除功能的实现
elementUI的表格搜索和删除功能的实现 1.搜索可以模糊搜索关键字 2.删除可以删除表格这条数据 3.搜索后可以删除表格数据并清空搜索时展示删除后的数据具体效果可以复制如下代码查看效果: &l ...
Vue 搭配element-UI 实现可搜索穿梭框
首先,如果还没有看过官方的例子的话,建议先浏览下官方的文档,本文主要介绍的是自己踩过的坑.在这基础上,假设您已经有了一定的vue.js的基础官方地址: http://element.eleme.io ...
element-ui中tree组件双击事件的实现
文章目录前言代码实现总结前言近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...
Android 利用AutoCompleteTextView实现模糊搜索功能，搜索结果自动提示，识别拼音首字母并转汉字提示
这里说一下怎么利用 Android 的 AutoCompleteTextView 控件实现模糊搜索功能,AutoCompleteTextView 自带自动提示功能.如果对自动提示的布局自定义要求比较 ...

elementUI的 tree搜索过滤，可识别拼音，且不区分大小写

elementUI的 tree搜索过滤，可识别拼音，且不区分大小写相关推荐

最新文章

热门文章