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

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

javascript 复制代码
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是唯一的,如果不是就需要其他能表示唯一性的字段来判断。

相关推荐
lyz2468596 小时前
vue3页面因参数未声明而报错的常犯错误
前端·javascript·vue.js
miss7 小时前
给规则引擎加一个拖拽画布:Vue Flow 单向投影 + 布局语义分离
javascript·vue.js·canvas
溪语流沙7 小时前
Django + Vue电商项目第005讲:后端骨架|Django初始化、配置分层与DRF接入
vue.js·后端·python·django
miss8 小时前
从零做一个可视化规则引擎:Vue3 递归条件树 + 双引擎结果对比
前端·vue.js·typescript
用户83134859306988 小时前
Vue3 v-bind 使用指南,从基础到高阶
前端·javascript·vue.js
FYKJ_20109 小时前
springboot鲜花销售系统91056-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·mysql·django·课程设计
Wx-bishekaifayuan10 小时前
Springcloud中学在线学习平台58883-计算机课程设计、毕业设计
java·vue.js·spring boot·学习·spring·spring cloud·课程设计
ljt272496066110 小时前
Vue笔记(九)--defineEmits
javascript·vue.js·笔记
qwfy1 天前
我要用 AI-native 架构,从零重建一套制造业 ERP/MES
vue.js·spring boot·架构
dsyyyyy11011 天前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js