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

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

javascript 复制代码
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是唯一的,如果不是就需要其他能表示唯一性的字段来判断。

相关推荐
nueroamazing1 天前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
LuckySusu1 天前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu1 天前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu1 天前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
LuckySusu1 天前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu1 天前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
云和数据.ChenGuang1 天前
vue中构建脚手架
前端·javascript·vue.js
q_19132846951 天前
基于RuoYi框架+Mysql的汽车进销存后台管理系统
数据库·vue.js·spring boot·mysql·汽车·个人开发·若依
code_Bo1 天前
基于vxe-table进行二次封装
前端·javascript·vue.js
梦6501 天前
axios请求
vue.js