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


目录
相关文章
|
2天前
element UI 组件封装--搜索表单(含插槽和内嵌组件)
element UI 组件封装--搜索表单(含插槽和内嵌组件)
14 5
|
2天前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
18 5
|
2天前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
12 3
|
1天前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
6 0
|
1天前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
4 0
|
1天前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
1天前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
6 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍