效果如图所示,点击tree
组件同时,渲染面包屑
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('>');
}
}
}
}
}
网友评论