elementUI的el-tree节点过滤事件

- 日理万妓 2022-05-17 09:07 506阅读 0赞

最近用到了elementUI的节点过滤事件，效果如下，当输入关键字搜索的时候，它会将所有含有关键字的节点都显示出来。

![这里写图片描述][70]  
![这里写图片描述][70 1]

废话不多说直接上代码:  
1、:filter-node-method这个就是我们的过滤节点的函数，  
2、filterText就是我们要过滤的内容  
3、我这里给input设置了一个change事件，意味着，每次输入完值，就在该函数里调用过滤节点的方法  
html

<el-input v-model="filterText" @change="filterChange"></el-input>
                <el-tree
                        ref="tree2"
                        node-key="nodeId"
                        :data="courseList"
                        :props="defaultProps"
                        @current-change="nodeClick"
                        highlight-current="true"
                        :default-expanded-keys="defaultCheckNode"
                        :default-checked-keys="defaultCheckNode"
                        :filter-node-method="filterNode"
                ></el-tree>

js

filterNode:function (value,data) { 
                if (!value) return true;
                return data.nodeName.indexOf(value) !== -1;
            },
            filterChange:function () { 
                // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
                this.$refs.tree2.filter(app.filterText);
            }

data数据

filterText:"",

注意：这里的:filter-node-method方法，官网的文档说明  
![这里写图片描述][70 2]

[70]: /images/20220517/39c1d8889a954f3dace2456ae08159d1.png
[70 1]: /images/20220517/db9945e5dbed45dea9322484e7d9e7f8.png
[70 2]: /images/20220517/efa5921ac9ae47b68c408682c1bd9cb3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关树形节点的过滤处理

// nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组 function filter(nodes, query) {

╰半橙微兮°/ 2023年01月14日 01:39/ 0 赞/ 107 阅读

相关 Qt消息机制：事件分发和事件过滤

事件分发和事件过滤图形界面应用程序的消息处理模型 Qt中的事件处理（1）在Qt中，事件被封装成一个个对象，所有的事件均继承自抽象类QEvent. （2）Qt平台将

以你之姓@/ 2022年12月27日 01:46/ 0 赞/ 273 阅读

相关 elementui tree 默认展开第一节点

> 代码如下 1.data设置存放id数组 2.默认展开属性赋值存放的id 3.监听watch事件 <template> <div class=

系统管理员/ 2022年11月06日 05:51/ 0 赞/ 651 阅读

相关 Elementui Tree 树形控件删除子节点

要求： Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交 ![1e20943742fb7842dc9120b9bacc002f.png][]

╰半夏微凉°/ 2022年09月05日 04:09/ 0 赞/ 500 阅读

相关 Elementui Tree 树形控件删除子节点

要求： Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交 ![59232a3edf3fe14045582f9e5e1fd58a.png][]

分手后的思念是犯贱/ 2022年09月02日 00:51/ 0 赞/ 268 阅读

相关 ElementUI+el-dropdown函数触发事件

最近使用element想实现一下效果，当点击下拉框时会触发事件填充数据,然后显示数据，但是当点击下拉框的时候怎么也触发不了函数。官网的写法：在trigger属性设置

逃离我推掉我的手/ 2022年05月21日 04:12/ 0 赞/ 519 阅读

相关 ElementUI中el-tree节点的操作

其实tree的有些方法用起来是很方便的， this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，

旧城等待，/ 2022年05月19日 04:59/ 0 赞/ 232 阅读

相关 elementUI的el-tree节点过滤事件

最近用到了elementUI的节点过滤事件，效果如下，当输入关键字搜索的时候，它会将所有含有关键字的节点都显示出来。 ![这里写图片描述][70] ![这里写图片描述][

- 日理万妓/ 2022年05月17日 09:07/ 0 赞/ 507 阅读

相关 ElementUI的form表单验证事件

用过了elementUi的表单验证、表单提交之后，个人觉得不是太建议使用。第一：和我们自己写js的繁琐程度差不多，第二，还要读文档增加了学习时间和成本。废话不多说，直接上

旧城等待，/ 2022年05月17日 00:43/ 0 赞/ 252 阅读

相关 jQuery--节点过滤（filter()、not()）详解

节点过滤在查找元素时，可以使用：first-child、:last-child和:eq()过滤选择器来选择一个特定的元素，还可以使用first()、last()和eq(

Love The Way You Lie/ 2021年08月13日 12:52/ 0 赞/ 500 阅读