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

效果如图所示，点击tree组件同时，渲染面包屑

image.png
image.png

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

export default {
  data(){
    return{
      breadList:[],     //面包屑数组
      breadLabel:''      //面包屑文字
    }
  },
  created(){
    this.getTypeList();
  },
  methods:{
    //选择节点
    changeDept(data){
      let tree = this.$refs.tree;
      this.breadList = []; //初始化
      this.getTreeNode(tree.getNode(data.value));
    },
    //获取当前树节点和其父级节点
    getTreeNode(node){
      if (node) {
        if (node.label !== undefined) {
          this.breadList.unshift(node.label); //在数组头部添加元素
          this.getTreeNode(node.parent); //递归
          this.breadLabel=this.breadList.join('>');
        }
      }
    }
  }
}