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

1.首先需要安装
js 拼音库 CnChar ，这个库主要就是做汉字转拼音和汉字笔画数的。
使用 npm i cnchar安装
任何在main.js中引用
import cnchar from ‘cnchar’;
Vue.use(cnchar);
2.完整代码如下：

<el-inputplaceholder="输入关键字进行过滤"v-model="filterText">
</el-input><el-treeclass="filter-tree":data="data":props="defaultProps"default-expand-all: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;// 匹配小写//将label拆散成小写拼音数组let arr = data.label.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值if(lengths.indexOf(spell.indexOf(value)) !== -1) return true// 大写//将label拆散成小写拼音数组let arrUp = data.label.spell('up', 'array');//拼接成完整label的拼音let spellUp = arrUp.join('');//lengths 是label完整拼音 中每个汉字第一个拼音字母的index值的数组let lengthsUp = [0];for (var i = 0; i < arrUp.length - 1; i++) {lengthsUp.push(lengthsUp[i] + arrUp[i].length);};//判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值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组件搜索过滤，可识别拼音，且不区分大小写相关推荐

element-ui中tree组件双击事件的实现
文章目录前言代码实现总结前言近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
修改Element-ui中tree组件最底层节点的样式
最近在项目中,设计将tree组件里最底层的节点布局设计成了多列,那要怎么实现呢? 首先用自定义节点的方式渲染节点,在渲染方法里给最底层节点添加class renderContent(h, { node ...
elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.随着社会信息化的高速增长,数据可视 ...
ElementUI中Tree组件兼容IE解决方案
更新时间:2021-08-21 v1.0 一.简介在软件开发初期阶段,经常会使用是市面上主流的浏览器进行功能开发,调试.为什么呢? 因为市面上主流的浏览器对W3C组织制定的标准更友好,同时对开发者. ...
elementui的tree组件页面显示不出数据_[Angular 组件库NG-ZORRO基础入门] -Hacker News: Pagination...
前言回顾到目前为止,我们已经实现了 hacker news 大部分页面功能设计,但是仍然缺少一个重要的翻页功能,API 现在没人是返回 20 条数据,我们今天会使用 Pagination 组件将分 ...
elementui tree组件层级过多时可左右滚动
2019独角兽企业重金招聘Python工程师标准>>> 使用vue+elementui的tree组件,elementui官网elementui的tree组件问题描述:tree层级过 ...
ElementUI 树型组件 el-tree 后台数据结构构建
前言 Vue+ElementUI 是目前项目开发中普遍使用的前端技术,我们在开发中肯定会遇到用树形展示数据的需求,比如公司和部门,公司下面有多个部门,部门下面又有多个班组,每个部门或者班组下有相关人员 ...
利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)
需求是用ant-design的组件做出如设计图所示类文件夹树,尝试修改多次样式及功能,最终使用tree组件完成功能,在次共享一下代码,如果有问题或者建议可以评论等探讨, 先上结构题代码,样式随附,主要 ...
后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件
将js数组转换成tree树形组件要的数据格式,有时候后端返回的是数组没有处理成树状结构,这个时候就需要前端自行转换,这里采用递归方式转换要展示的效果上代码 <!DOCTYPE html> ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...

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

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

最新文章

热门文章