如何在el-tree异步树中获取所有已展开的节点数据？

Question

在使用Element Plus的`el-tree`组件时，如何获取异步树中所有已展开的节点数据是一个常见的技术问题。尽管`el-tree`提供了`getCheckedNodes`和`getCurrentKey`等方法来获取选中或当前节点，但对于已展开节点的数据获取，并没有直接的方法支持。此时，可以结合`treeRef`引用与`store.expandedKeys`属性，通过遍历树结构或监听`node-expand`/`node-collapse`事件，动态记录已展开节点的key值。随后，利用这些key值调用`getNodes`或递归查询树结构，提取对应的节点数据。需要注意的是，在异步加载场景下，确保数据完全加载后再执行相关逻辑，避免遗漏未加载的子节点数据。

Answer 1

1. 问题概述

在使用Element Plus的el-tree组件时，获取异步树中所有已展开节点的数据是一个常见的技术难题。虽然该组件提供了诸如getCheckedNodes和getCurrentKey等方法来获取选中或当前节点信息，但针对已展开节点的数据获取，并未提供直接的方法支持。

为解决这一问题，开发者需要结合treeRef引用与store.expandedKeys属性，通过遍历树结构或监听node-expand/node-collapse事件，动态记录已展开节点的key值。随后，利用这些key值调用getNodes或递归查询树结构，提取对应的节点数据。

以下是解决问题的具体步骤和相关代码示例：

2. 技术分析

• 异步加载场景下的挑战：由于异步加载的特性，部分子节点可能尚未加载完成。因此，在执行逻辑前，需确保数据完全加载，避免遗漏未加载的子节点数据。
• 关键属性与方法：
  • treeRef：用于引用el-tree实例。
  • store.expandedKeys：记录当前已展开节点的key值。
  • node-expand/node-collapse事件：监听节点的展开与折叠状态变化。

以下为实现流程的关键点：

3. 解决方案

以下是具体的解决方案步骤：

1. 初始化展开节点记录：创建一个数组expandedKeys，用于存储已展开节点的key值。
2. 监听展开/折叠事件：通过node-expand和node-collapse事件动态更新expandedKeys。
3. 递归查询节点数据：根据expandedKeys中的key值，调用getNodes或递归查询树结构，提取对应的节点数据。

以下是代码实现示例：

<template>
  <el-tree
    ref="treeRef"
    :data="treeData"
    node-key="id"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 异步加载的树数据
      expandedKeys: [] // 记录已展开节点的key值
    };
  },
  methods: {
    handleNodeExpand(node) {
      this.expandedKeys.push(node.id);
    },
    handleNodeCollapse(node) {
      const index = this.expandedKeys.indexOf(node.id);
      if (index !== -1) {
        this.expandedKeys.splice(index, 1);
      }
    },
    getExpandedNodes() {
      const expandedNodes = [];
      this.expandedKeys.forEach(key => {
        const node = this.$refs.treeRef.getNode(key);
        if (node) {
          expandedNodes.push(node.data);
        }
      });
      return expandedNodes;
    }
  }
};
</script>

4. 流程图

以下是解决方案的流程图，展示了如何通过监听事件和递归查询实现目标：

graph TD;
    A[初始化] --> B{监听事件};
    B -->|node-expand| C[记录key];
    B -->|node-collapse| D[移除key];
    E[递归查询] --> F{获取节点数据};
    F --> G[返回结果];

此流程图清晰地展示了从初始化到最终获取已展开节点数据的完整过程。