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; } )