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

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

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

这篇关于element-ui的tree组件获取父级节点渲染面包屑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---