elementui tree 节点过滤加载对应子节点

时间:2021-04-04 23:09:22
/官网例子
<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 树形菜单加载父&sol;子节点

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

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

    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设备节点的过程&lpar;以高通8974平台为例&rpar;

    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&period;tree&period;TreePanel 动态加载数据

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

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

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

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

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

随机推荐

  1. &lbrack;原创&rsqb;Android插件化的一种实现

    Android的插件化已经是老生常谈的话题了,插件化的好处有很多:解除代码耦合,插件支持热插拔,静默升级,从根本上解决65K属性和方法的bug等等. 下面给大家介绍一下我们正在用的插件化框架.本片主要 ...

  2. IIS 之 添加绑定域名 或 设置输入IP直接访问网站

    1.打开IIS,右键站点 → 编辑绑定,弹出“网站绑定”窗口,如下图:   2.点击“添加”,弹出“添加网站绑定”窗口,如下图:   注意:若想输入 IP 地址直接访问,则可以有以下两种设置任一均可: ...

  3. &lbrack;转载&rsqb;C&num;缓存absoluteExpiration、slidingExpiration两个参数的疑惑

    看了很多资料终于搞明白cache中absoluteExpiration,slidingExpiration这两个参数的含义. absoluteExpiration:用于设置绝对过期时间,它表示只要时间 ...

  4. jQuery知识点整合

    一.jQuery介绍 jQuery是一个函数库,一个js文件,页面用script标签引入js文件就可以使用 <script type="text/javascript" sr ...

  5. 本地新建git仓库后与远端仓库关联

    背景说明:如果你想把自己的一个项目开源到,需要新建一个本地代码仓库,然后与远端代码库建立关.不想使用git clone 命令去克隆远端新建代码仓库,然后再将我们写好的代码copy到克隆下来的文件夹里, ...

  6. 性能测试Jmeter扩展学习-添加自定义函数

    我们在使用jmeter的时候有时候会碰到jmeter现有插件或功能也无法支持的场景,比如前端加密,此时我们就需要自己手动编写函数并导入了,下面就是手动修改并导入的过程. 首先我们需要下载jmeter源 ...

  7. c&plus;&plus;沉思录 学习笔记 第六章 句柄&lpar;引用计数指针雏形?&rpar;

    一个简单的point坐标类 class Point {public: Point():xval(0),yval(0){} Point(int x,int y):xval(x),yval(y){} in ...

  8. FPGA的发展史及FPGA 的基础架构

    通过了解早期FPGA的发展,理解FPGA究竟是干什么的,FPGA到底在电子设计领域起到了什么样的作用,下面是一张早期的设计过程 早期的设计流程过程中,只有当硬件完成了才能够得到功能的验证,随着集成电路 ...

  9. 关于对DI和IOC的概念理解

    在spring框架学习过程中,涉及到两个新名词:DI和IOC.开始总是混淆两者的概念,稀里糊涂,后来上网搜了一下又和同学讨论之后,基本上理解了二者的概念.实际上DI(依赖注入)和IOC(控制反转)就是 ...

  10. python&lowbar;basic

    开始学习python ,欢迎一起进步.