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

相关推荐
前端摸鱼匠7 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
Python私教17 小时前
Pure-Admin-Thin 深度解析:完整版和精简版到底怎么选?
vue.js·人工智能·开源
ayqy贾杰19 小时前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
李白的天不白20 小时前
vue 数据格式问题
前端·vue.js·windows
小白蒋博客20 小时前
【ai开发段永平投资理财的知识图谱网站】第一天:搭 Vite + Vue 项目,跑通 Hello World
vue.js·人工智能·trae
@yanyu6661 天前
登录注册功能-明文
vue.js·springboot
滕青山1 天前
在线PDF拆分工具核心JS实现
前端·javascript·vue.js
光影少年2 天前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架
李白的天不白2 天前
VUE依赖配置问题
前端·javascript·vue.js
小智社群2 天前
获取贝壳新房列表
前端·javascript·vue.js