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

相关推荐
斯~内克30 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee1011 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒292 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树3 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin3 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑4 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598245 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag5 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长5 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app