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

相关推荐
资源大佬星 课it4 小时前
重学C++ ,重构你的C++知识体系
vue.js·docker·django
Eason_Lou5 小时前
【无标题】
前端·vue.js·html
Eason_Lou7 小时前
vue flow使用注意事项
前端·vue.js
马可家的菠萝11 小时前
Vue3 + Canvas 手绘笔记工程化实践:别把画布只当成一张 PNG
前端·vue.js·算法
用户8417948145612 小时前
如何用 vue 甘特图来实现计划和实际双任务条进度展示
vue.js
京东云开发者15 小时前
【全栈实践】第一个 AI Agent 项目:从零搭建 AI 音频创作助手【最终版】
前端·vue.js·音视频开发
一颗烂土豆15 小时前
ECharts 太平面?试试这款 Vue 3D 图表库
前端·vue.js·echarts
宿67416 小时前
vscode文件夹
前端·vue.js·vscode
sosohotsummer16 小时前
Vue多级路由嵌套,keep-alive缓存问题
前端·javascript·vue.js
雪芽蓝域zzs17 小时前
新建前端pnpm(vue js ) 仿若依项目(一)
前端·javascript·vue.js