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


目录
相关文章
|
1月前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
180 1
基于Element UI或Element Plus实现具有倒计时的Message消息提示
|
1月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
67 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
1月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
115 0
Element UI & Element Plus之改变表格单元格颜色
|
21天前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
59 0
|
22天前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
68 0
|
22天前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
68 0
|
1月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
27 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍

热门文章

最新文章