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

相关推荐
JIngJaneIL7 分钟前
基于Java失物招领系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·vue
用户8417948145619 分钟前
如何使用 vxe-gantt table 甘特图来实现多个维度视图展示,支持切换年视图、月视图、周视图等
vue.js
by__csdn20 分钟前
Vue 双向数据绑定深度解析:从原理到实践的全方位指南
前端·javascript·vue.js·typescript·前端框架·vue·ecmascript
奋斗吧程序媛24 分钟前
前端 Token 管理与最佳实践
前端·vue.js
zhousenshan1 小时前
vue3 createApp用法
vue.js
Rysxt_1 小时前
Vue 集成富文本编辑器教程
前端·javascript·vue.js·富文本
奋斗吧程序媛1 小时前
request请求相关
前端·javascript·vue.js
WX-bisheyuange1 小时前
基于Spring Boot的宠物商城网站设计与实现
前端·javascript·vue.js·毕业设计
q_19132846951 小时前
基于Springboot2+Vue2+uniapp的单商家在线点餐外卖小程序
vue.js·spring boot·mysql·小程序·uni-app·计算机毕业设计
by__csdn2 小时前
Vue3响应式系统详解:ref与reactive全面解析
前端·javascript·vue.js·typescript·ecmascript·css3·html5