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

简介: 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;
    }
)


目录
相关文章
|
7月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
630 12
|
7月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
1326 0
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
12837 5
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
前端开发 Linux C#
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
一款开源、免费、美观的 Avalonia UI 原生控件库 - Semi Avalonia
1345 10
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
2736 6
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
411 0
|
9月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
300 15
|
9月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
339 11
|
5月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
451 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
8月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
296 56

热门文章

最新文章