<template>
<div>
<el-tree
ref="tree"
:data="data"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
<el-breadcrumb class="bread-box">
<el-breadcrumb-item class="bread-text">{{ breadLabel }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
breadList: [], // 面包屑数组
breadLabel: '', // 面包屑文字
}
},
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('>') // 面包屑文字拼接
}
}
}
}
</script>
<style lang="scss" scoped>
.bread-box {
margin-top: 20px;
position: relative;
display: inline-block;
line-height: 2;
.bread-text {
background: linear-gradient(to right, skyblue, green) no-repeat right bottom;
background-size: 0% 2px;
transition: background-size 1s ease;
&:hover {
background: linear-gradient(to right, skyblue, green) no-repeat left bottom;
background-size: 100% 2px;
}
}
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/a29837059d6a56e2df6b7f059867f855.png)