设置el-tree默认展开两级节点,并写一个方法,根据el-tree的节点id找到其子节点跟孙子节点
时间: 2023-07-20 10:24:31 浏览: 449
vue el-tree 默认展开第一个节点的实现代码
5星 · 资源好评率100%
要设置 el-tree 默认展开两级节点,可以在 el-tree 中添加 default-expand-all 和 :default-expand-level 两个属性,如下所示:
```
<el-tree
:data="treeData"
:props="treeProps"
:default-expand-all="false"
:default-expand-level="2"
></el-tree>
```
其中,default-expand-all 决定是否默认展开全部节点,而 default-expand-level 决定默认展开的层级。
要根据 el-tree 的节点 id 找到其子节点和孙子节点,可以使用 el-tree 的 getNode 方法获取节点对象,然后遍历其子节点和孙子节点。具体实现代码如下:
```
methods: {
findChildNodes(nodeId) {
const node = this.$refs.tree.getNode(nodeId);
const childNodes = [];
const findChildNodesRecursively = function(node) {
if (node.children) {
for (let i = 0, len = node.children.length; i < len; i++) {
childNodes.push(node.children[i]);
findChildNodesRecursively(node.children[i]);
}
}
};
findChildNodesRecursively(node);
return childNodes;
}
}
```
其中,findChildNodes 方法接收一个节点 id,获取节点对象后,定义了一个递归函数 findChildNodesRecursively 遍历其子节点和孙子节点,并将其存入 childNodes 数组中,最后返回该数组。
阅读全文