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

相关推荐
Можно11 分钟前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
天天向上10242 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
reembarkation4 小时前
vue3中使用howler播放音频列表
前端·vue.js·音视频
要换昵称了5 小时前
Axios二次封装及API 调用框架
前端·vue.js
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之Pinia详解
前端·javascript·vue.js
假装没有名字5 小时前
Vue2、Vue3中的$scopedSlots和$slots区别
vue.js
徐小夕9 小时前
花了一周时间,我们开源了一款PDF编辑SDK,支持在线批注+脱敏
前端·vue.js·github
前端Hardy9 小时前
NW.js v0.109.1 最新稳定版发布:被遗忘的桌面开发神器?启动快 3 倍,内存省 70%!
前端·javascript·vue.js
踩着两条虫9 小时前
AI驱动的Vue3应用开发平台 深入探究(十四):扩展与定制之插件系统开发指南
vue.js·人工智能·低代码·重构·架构
Jay叶湘伦10 小时前
【极简】用 Vue 写一个 ChatGPT 前端应用,支持连续对话、Markdown 渲染与本地记忆
前端·vue.js·chatgpt