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

相关推荐
吹牛不交税2 分钟前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD0011 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
_codemonster3 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
wqq63108556 小时前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng9452013146 小时前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
Hello.Reader6 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
EchoEcho8 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒8 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
发现一只大呆瓜10 小时前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
鱼毓屿御10 小时前
如何给用户添加权限
前端·javascript·vue.js