el-tree动态加载、指定节点展开

更新时间:2023-07-09 07:45:10 阅读: 评论:0

el-tree动态加载、指定节点展开
要求:
1. 画⾯左侧显⽰el-tree树。初始只加载 根节点 和 根节点的⼦节点,并展开根节点。
2. 点击树上每个节点左边的⼩三⾓时,加载它的⼦节点,并展开此节点。同时右侧view显⽰⼦节点⼀览表。
3. 在右侧⼀览表上点击⼦节点时,左边树上的这个⼦节点往下展开⼀层。
做法:
1.⾸先既然是动态加载,那必须选择lazy加载模式,并定义加载时使⽤的⽅法:
<el-tree
......
:load="expandTreeNode" // 加载⽅法
lazy
运动员跳远......
/>
expandTreeNode(node, resolve) {法国风情
if (node.level === 0) {
橄榄菜怎么做好吃
return resolve([])
}
if (node.data.childGetFlag === 0) { // 未取得⼦节点
此处⾃定义取得⽅法
} el { // 已取得⼦节点
return resolve(node.data.children)
}
}
龙猫2.因为有些展开操作不是点击⼩三⾓,⽽是代码控制的,所以⼀开始考虑⽤default-expanded-keys来控制,但是做的时候遇到了⼀些问题⽆法解决。(具体什么问题,忘了。。。)
上海野生动物园后来采⽤了节点的expanded属性来控制,写了expandNode函数(仅设置属性,⼦节点数据的取得在别处处理):2月26日是什么星座
expandNode(node) {
if (node.data.children.length === 0) {
node.isLeaf = true  // 对于叶⼦节点,点击⼩三⾓后,⼩三⾓会消失。
头像漫画}
道教创始人
node.loaded = true // 标识:已加载
}
3.关于:load="expandTreeNode"和节点的loaded属性
点击⼩三⾓时,会调⽤expandTreeNode,但前提是节点的loaded属性为fal。
⾃定义的expandNode函数能展开节点,但不会调⽤expandTreeNode。
如果在expandNode函数中没有设置loaded为true,那么再次点击⼩三⾓时仍然会调⽤expandTreeNode,会导致数据重新加载,加载后所有⼦节点的expanded属性被重置为fal,即记不住原来的展开还是不展开状态,⼦节点全部变成不展开。

本文发布于:2023-07-09 07:45:10,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1074130.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:节点   加载   展开   属性   问题
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图