/官网例子
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input> <el-tree
class="filter-tree"
:data="data2"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree2">
</el-tree> <script>
export default {
watch: {
filterText(val) {
this.$refs.tree2.filter(val);
}
}, methods: {
//不会返回匹配的node的子节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}, data() {
return {
filterText: '',
data2: [{
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 节点过滤加载对应子节点的更多相关文章

  1. EasyUI 树形菜单加载父/子节点

    通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree)是不允许的. 但是我们可以在加载树形菜单之前,把它转换为标准标准 ...

  2. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  3. LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

    LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...

  4. Ztree异步加载自动展开节点

    在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...

  5. Linux加载DTS设备节点的过程(以高通8974平台为例)

    DTS是Device Tree Source的缩写,用来描述设备的硬件细节.在过去的ARM Linux中,arch/arm/plat-xxx和arch/arm/mach-xxx中充斥着大量的垃圾代码, ...

  6. 【EasyUI学习-2】Easyui Tree的异步加载

    作者:ssslinppp       1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...

  7. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  8. JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  9. Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题

    问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1.  将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...

随机推荐

  1. delphi TTcpClient TTcpServer分析(转)

    delphi TTcpClient TTcpServer分析(转) 只描述windows socket部分. sockets.pas中各个类得继承关系: TBaseSocket | --------- ...

  2. CF232E Quick Tortoise , Fzoj 3118

    这一题由于数据较多,我们考虑离线处理. 分治.对于两个点s,t,如果起点在mid这条横线上方,终点在下方,那么它必定会穿过mid这条线.所以只要s可以到mid上一点x,x可以到t,st就是安全的. 用 ...

  3. AcWing ST算法(区间求最值)打卡

    一,介绍 ST算法是一个用倍增来求区间最值的算法,倍增是一个与二分类似的思想的一个东西,倍增简而言之也就是区间长度按1,2,4,8..... 我们先用nlog(n)的复杂度打出一个最大值表,后面我们可 ...

  4. 带头节点的单链表-------C语言实现

    /***************************************************** Author:Simon_Kly Version:0.1 Date:20170520 De ...

  5. C++中调用OC代码

    前言 最近项目中为了方便维护,底层统一使用C++编写.由于是项目是做屏幕共享sdk,所以只能底层的压缩.编解码使用C++,屏幕捕获部分Mac和win就自己实现了.那么问题就来了,因为是面向接口编程,所 ...

  6. linux下根据根据进程号查端口、根据端口号查进程号汇总,以及netstat的相关资料(工作中匮乏的知识)

    根据端口查进程: lsof -i:port netstat -nap | grep port 根据进程号查端口: lsof -i|grep pid netstat -nap | grep pid 根据 ...

  7. Linux下使用java获取cpu、内存使用率

    原文地址:http://www.voidcn.com/article/p-yehrvmep-uo.html 思路如下:Linux系统中可以用top命令查看进程使用CPU和内存情况,通过Runtime类 ...

  8. json 报错415 400

    JS操作JSON总结   $(function(){ $.ajax({ method: 'post', url: '/starMOOC/forum/getSectionList', dataType: ...

  9. jQuery 对文档的操作

    通过jquery方式实现页面各种节点的追加.修改.删除.复制等操作 节点追加 1 父子关系追加 /*************************************************** ...

  10. ThreadLocal浅析

    1.ThreadLocal的大体理解 ThreadLocal 又名 线程局部变量,是 Java 中一种较为特殊的 线程绑定机制,可以为每一个使用该变量的线程都提供一个变量值的副本,并且每一个线程都可以 ...