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

相关推荐
睡美人的小仙女1279 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
喔烨鸭10 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~11 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_4903543412 小时前
Vue设计与实现
前端·javascript·vue.js
人间观察员14 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
雪中何以赠君别15 小时前
Vue 2 与 Vue 3 双向绑定 (v-model) 区别详解
前端·javascript·vue.js
林太白15 小时前
Vue3-ElementPlus使用
前端·javascript·vue.js
不一样的少年_15 小时前
这才是 Vue 驱动的 Chrome 插件工程化正确打开方式
vue.js·chrome·typescript
胡八一17 小时前
使用qianjkun uniapp 主应用 集成 vue微应用
前端·vue.js·uni-app
blueblood18 小时前
在 Ant Design Vue 2 中隐藏 a-modal 右下角自带的确定按钮
前端·vue.js