Element UI 树形控件Tree 【详解】el-tree 展开指定节点，判断是否存在指定节点

el-tree 动态指定默认选中节点

https://blog.csdn.net/weixin_41192489/article/details/111603811

el-tree 判断是否存在指定节点（需设置node-key）

使用 getNode 方法进行判断，若返回节点，则存在，若返回null 则不存在

this.$refs.树的ref值.getNode(指定节点对应的key值)

el-tree 展开指定节点（需设置node-key）

官网并未提供相关的方法，但可以使用下方代码实现：

this.$refs.树的ref值.store.nodesMap[指定节点对应的key值].expanded = true;

完整范例代码

 <el-tree ref="menuTree" :data="menuTreeData" node-key="label" highlight-current />

"menuTreeData":
[
  {
    "label": "前端三剑客",
    "children": [
      {
        "label": "html",
        "children": [
              {
                "label": "文字",
              },
              {
                "label": "图片",
              },
         ]
      },
      {
        "label": "css",
      },
      {
        "label": "javascript",
      },
    ]
  }
]

判断是否存在html节点

this.$refs.menuTree.getNode("html")

展开 html节点

this.$refs.menuTree.store.nodesMap["html"].expanded = true;

 实战案例

//假设指定节点对应的key值为 html
let targetNodeKey = 'html'

this.$nextTick(
    () => {
        //判断是否存在指定节点
        if( this.$refs.menuTree.getNode(targetNodeKey)){
            //若存在指定节点，则设置当前节点为指定节点（用于高亮显示当前节点）
            this.$refs.menuTree.setCurrentKey(targetNodeKey)
            //展开指定节点
            this.$refs.menuTree.store.nodesMap[targetNodeKey].expanded = true;
        }else {
            //若不存在指定节点，则设置当前节点为null（清除当前节点的高亮效果）
            this.$refs.menuTree.setCurrentKey()
        }
    }
)

核心要点

1. 要设置key

node-key="label"

2. 执行$refs前，务必确保树渲染完成，必要时使用 $nextTick

this.$nextTick(
    () => {
      this.$refs.menuTree.store.nodesMap["html"].expanded = true;
    }
)