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

相关推荐
利刃大大8 小时前
【Vue】Vue2 和 Vue3 的区别
前端·javascript·vue.js
安且惜9 小时前
带弹窗的页面--以表格形式展示
前端·javascript·vue.js
码界奇点13 小时前
基于SpringBoot+Vue的前后端分离外卖点单系统设计与实现
vue.js·spring boot·后端·spring·毕业设计·源代码管理
不吃香菜的猪13 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
css趣多多13 小时前
props,data函数,computed执行顺序
前端·javascript·vue.js
一个不称职的程序猿13 小时前
构建优雅的 Vue.js 表情包选择器:一个功能丰富且可定制的 Emoji Picker 组件
前端·javascript·vue.js
Amumu1213814 小时前
Vue核心(二)
前端·javascript·vue.js
墨轩尘14 小时前
qiankun的简单使用
前端·vue.js·前端框架
wusp199415 小时前
v-model 和 :value 的深度解析
前端·javascript·vue.js
Code知行合壹16 小时前
Vue项目中SVG图标
前端·vue.js