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

实现效果

关键：就是不用element-ui的组件，自己来拼接字符串（可能出现的问题我进行了补充说明）

代码块

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          v-model="filterText"
          placeholder="请输入关键字"
          style="margin-bottom: 30px; width: 220px"
        />

        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          node-key="id"
          @node-click="handleNodeClick"
          current-node-key="aa"
        >
          <span class="custom-tree-node" slot-scope="{ node }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-breadcrumb separator="el-icon-arrow-right" style="margin-bottom: 40px">
          <el-breadcrumb-item>{{breadLabel}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import brandApi from "@/api/brand";
export default {
  data() {
    return {
      breadList: [], //面包屑数组
      breadLabel: "", //面包屑文字
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  created() {
    this.getMenus();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  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(">");
      }
    },
    //输入搜索
    filterNode(value, data) {
      if (!value) return true; //判断输入的value是否为空,不为空显示（true）
      return data.name.indexOf(value) !== -1; //判断是否存在不存在为-1(false)
    },
    //tree三级联动
    getMenus() {
      brandApi.getMenus().then((res) => {
        this.data = res.data.data;
      });
    },
  },
};
</script>

核心逻辑

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('>'); //面包屑文字及层级链接符号
          }
      }
 }
}

可能出现的问题以及解决办法

console.log(this.$refs.tree.getNode(data.id));//如果这里报错没出现Node

解决办法

//16行
 node-key="id"//没加