在vue elmennt tree 中点击子节点获取所有父节点的信息

九别。

于 2021-04-30 10:07:55 发布

阅读量994

点赞数 3

文章标签： javascript es6 vue.js

本文链接：https://blog.csdn.net/YTXLZ520/article/details/116294495

版权

这段代码展示了如何在Vue中利用Element-UI的el-tree组件处理节点点击事件。handleNodeClick函数被触发时，它会通过getparentsNode递归获取所点击节点的所有父节点标签，并将它们存入breadList数组中，从而得到节点的路径信息。此示例适用于需要跟踪和展示树形数据结构中节点层级关系的应用。

摘要由CSDN通过智能技术生成

 <el-tree
          :data="data"
          ref="tree"
          class="treedata"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>

// 这是htlm 部分；

  handleNodeClick(data, node) {
  //  this.$store.dispatch('settings/changetreedata',[1,2,3])
     let selectNode = this.$refs.tree.getNode(node) //  获取点击当节点的dom的信息 
     this.getparentsNode(selectNode)  //调用递归函数
       console.log(this.breadList,'ssss')  // data 里面定义的数组
    },
      // 递归
    getparentsNode(node) { 
       if (!node.parent) {
            return
        }
       this.breadList.unshift(node.label) 
       this.getparentsNode(node.parent)//调用递归
    },