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

相关推荐
BillKu9 分钟前
Vue3取消网络请求的方法(AbortController)
前端·javascript·vue.js
武昌库里写JAVA3 小时前
iView Admin的side menu改为top menu
java·vue.js·spring boot·课程设计·宠物管理
BillKu4 小时前
前端Vue3 + 后端Spring Boot,前端取消请求后端处理逻辑分析
java·vue.js·spring boot
海盐泡泡龟5 小时前
Vue中的过滤器知道多少?从是什么、怎么用、应用场景、原理分析、示例解释
前端·vue.js·flutter
程序猿John6 小时前
使用vue3 脚手架创建项目
vue.js
牧杉-惊蛰13 小时前
Vue3中到达可视区域后执行
前端·javascript·vue.js
观无19 小时前
Nginx部署Vue+ElementPlus应用案例(基于腾讯云)
前端·javascript·vue.js
猿来入此小猿20 小时前
基于SpringBoot+Vue实现的电影推荐平台功能一
vue.js·spring boot·毕业设计·毕业源码·免费学习·猿来入此·电影推荐平台
Humble-H1 天前
Vue 3 动态 ref 的使用方式
前端·javascript·vue.js
醉书生ꦿ℘゜এ1 天前
threejs学习002-场景中添加几何体
javascript·vue.js·学习·threejs