修改element ui tree 搜索功能，实现分级搜索，关键字高亮

element ui 里面的tree 自带的搜索功能是默认搜索的全部数据，有关键字的显示，没有的不显示

需求：

在element UI tree 原有功能不变的情况下新加

1）搜索 tree 时，如果非叶子节点里面含有关键字，那么就显示此节点下的所有节点，此节点下的所有节点不参与过滤；

2）所有节点里面含有的关键字都高亮

效果如下：

实现：

1）修改插件自带的 filterNode 方法，官方文档里面说明有一个参数为node ,node里面可以得到当前级数和父级元素

2）利用正则动态匹配关键字，然后高亮

filterNode (value, data, node) {// 如果共有四级菜单console.log(value, data, node)if (!value) return truelet ifOne = data.name.indexOf(value) !== -1let ifTwo = node.parent && node.parent.data && node.parent.data.name && (node.parent.data.name.indexOf(value) !== -1)let ifThree = node.parent && node.parent.parent && node.parent.parent.data && node.parent.parent.data.name && (node.parent.parent.data.name.indexOf(value) !== -1)let ifFour = node.parent && node.parent.parent && node.parent.parent.parent && node.parent.parent.parent.data && node.parent.parent.parent.data.name && (node.parent.parent.parent.data.name.indexOf(value) !== -1)let resultOne = falselet resultTwo = falselet resultThree = falselet resultFore = falseif (node.level === 1) {resultOne = ifOne} else if (node.level === 2) {resultTwo = ifOne || ifTwo} else if (node.level === 3) {resultThree = ifOne || ifTwo || ifThree} else if (node.level === 4) {resultFore = ifOne || ifTwo || ifThree || ifFour}return resultOne || resultTwo || resultThree || resultFore},

      <el-input placeholder="输入关键字进行搜索"class="filter"v-model="filterText"></el-input><el-tree :data="treeData":props="defaultProps"icon-class="tree-icon el-icon-caret-right":accordion="true":highlight-current="true":filter-node-method="filterNode"@node-click="handleNodeClick"ref="tree"><span class="custom-tree-node keywords_em"slot-scope="{ node, data }"><span v-if="!filterText">{{data.name}}</span><span v-if="filterText"v-html="data.name.replace(new RegExp(filterText,'g'),`<em>${filterText}</em>`)"></span></span></el-tree>

修改element ui tree 搜索功能，实现分级搜索，关键字高亮相关推荐

Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
使用Microsoft SQL Server 2000全文搜索功能构建Web搜索应用程序 --作者：Andrew B. Cencini...
[摘要]了解如何充分利用SQL Server 2000的全文搜索功能.本文包含有关实现最大吞吐量和最佳性能的几点提示和技巧. 概述使用Microsoft© SQL Server 2000的全文搜索功 ...
高德地图搜索功能以及清除搜索结果maker
第一次写文章,写得不好各位看官见谅~ (pσ_σ)P 首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
win7搜索功能失效/win7搜索功能不能使用
前几天更新了下系统,是用360更新的(也可能是中毒了)今天突然发现win7的开始菜单中的搜索功能失效了,我的电脑里面的搜索功能也失效了,同时附加的现象还有开始菜单中的控制面板点不开,原因到现在还没找到 ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
php搜索功能实现,PHP 搜索查询功能实现
今天遇到一个问题:在做"搜索"功能时,输入查询条件后查询不了. 我做的是首页显示数据表package中的内容,但是有个条件,显示在首页的内容还必须是 :字段status=0,且pr ...

修改element ui tree 搜索功能，实现分级搜索，关键字高亮

修改element ui tree 搜索功能，实现分级搜索，关键字高亮相关推荐

最新文章

热门文章