vue3 elementPlus el-tree组件点击子组件的时候获取其所有父组件的id

最新推荐文章于 2025-04-01 23:57:17 发布

阿司匹津

最新推荐文章于 2025-04-01 23:57:17 发布

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/a497579916/article/details/134202586

版权

本文介绍了如何在Vue的el-tree组件中，通过`node-click`事件处理函数，利用递归方法获取选中节点及其所有父节点的ID。findParentNodes函数实现了从给定节点开始向上查找父节点的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当点击某一分类的时候，获取其ID和其父的所有id

效果：

          <el-tree
            :data="deptOptions"
            :props="{ label: 'dictName', children: 'children' }"
            
            @node-click="handleNodeClick"
            @node-expand="handleNodeExpand"
            
          >

** 节点单击事件 */
function handleNodeClick(nodeData) {
  // 递归查找所有父节点
  const parentNodes = findParentNodes(nodeData);
  parentNodes.unshift(nodeData.id);
  let ids = parentNodes.reverse();
  console.log(ids);
}

function findParentNodes(nodeData) {
  const parentNodes = [];
  let treeref = proxy.$refs["deptTreeRef"];
  // console.log(nodeData);

  const findParent = (node) => {
    let pid = treeref.getNode(node).parent.data.id || 0;
    // console.log(pid);
    // console.log(treeref.getNode(node).parent.data);
    if (pid !== 0) {
      parentNodes.push(pid);
      findParent(treeref.getNode(node).parent.data);
    }
  };
  findParent(nodeData);
  return parentNodes;
}