element-ui的tree组件获取父级节点渲染面包屑

代码如下，this.breadList就是最终的面包屑数组，this.breadLabel就是面包屑显示的层级文字。

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('>'); //面包屑文字及层级链接符号
          }
      }
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

id是唯一的，如果不是就需要其他能表示唯一性的字段来判断。