element-ui的tree组件获取父级节点渲染面包屑

代码如下,this.breadList就是最终的面包屑数组,this.breadLabel就是面包屑显示的层级文字。

export default {
 data() {
 return {
    breadList:[], //面包屑数组
    breadLabel:'' //面包屑文字
 }
 },
 created(){},
 mounted(){},
 methods:{
     //选择节点
     handleNodeClick(data) {
        //获取面包屑
        this.breadList = []; 
        this.getTreeNode(this.$refs.tree.getNode(data.id));
     },
     //获取当前树节点和其父级节点
     getTreeNode(node){
       if (node && node.label) {
            this.breadList.unshift(node.label); //在数组头部添加元素
            this.getTreeNode(node.parent); //递归
            this.breadLabel=this.breadList.join('>'); //面包屑文字及层级链接符号
          }
      }
 }
}

id是唯一的,如果不是就需要其他能表示唯一性的字段来判断。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 06:00:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 06:00:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 06:00:02       82 阅读
  4. Python语言-面向对象

    2024-03-15 06:00:02       91 阅读

热门阅读

  1. 音视频实战---从音视频文件中提取h264裸流

    2024-03-15 06:00:02       42 阅读
  2. CMake 脚本命令(Scripting Commands)之find_package

    2024-03-15 06:00:02       46 阅读
  3. 谈谈对chatgpt的看法

    2024-03-15 06:00:02       40 阅读
  4. ChatGPT的核心技术

    2024-03-15 06:00:02       49 阅读
  5. 导出pdf

    导出pdf

    2024-03-15 06:00:02      32 阅读
  6. 华为OD应聘感受

    2024-03-15 06:00:02       90 阅读
  7. Rust镜像配置

    2024-03-15 06:00:02       46 阅读
  8. 使用Excel导入和导出数据

    2024-03-15 06:00:02       43 阅读
  9. [Django 0-1] Core.Files

    2024-03-15 06:00:02       45 阅读
  10. Redis-Sentinel哨兵

    2024-03-15 06:00:02       35 阅读
  11. PYTHON 120道题目详解(118-120)

    2024-03-15 06:00:02       38 阅读