Element Plus中el-tree组件根节点数据获取方法

在使用 Element Plus 开发后台系统时，el-tree 是处理层级结构数据的核心组件之一。很多实际业务场景中，例如组织架构、分类目录、权限菜单，都需要对树形结构的“根节点数据”进行单独处理或动态获取，这也是开发中经常遇到的关键问题。

el-tree数据结构与根节点的本质

el-tree 的数据本质是一个递归嵌套结构，每个节点通过 children 字段形成层级关系。所谓“根节点”，指的是最外层数组中的第一层数据项。

典型结构如下：

JavaScript
const treeData = [
  {
    id: 1,
    label: "系统管理",
    children: [
      {
        id: 11,
        label: "用户管理"
      },
      {
        id: 12,
        label: "角色管理"
      }
    ]
  },
  {
    id: 2,
    label: "内容管理",
    children: []
  }
];

这里的 系统管理 和 内容管理 就是根节点。

方法一：直接使用原始数据获取根节点

最简单的方式就是直接访问数据源数组本身，因为 el-tree 并不会改变原始数据结构。

JavaScriptconst rootNodes = treeData;

如果只需要根节点的部分字段，可以进一步处理：

JavaScriptconst rootLabels = treeData.map(item => item.label);

这种方式适用于数据已经在前端完整加载的情况，也是最推荐的基础方案。

方法二：通过 el-tree 实例获取节点

在实际开发中，经常需要通过组件实例来操作树结构。el-tree 提供了 getNode、getCurrentNode 等方法，但它们主要用于获取当前选中节点，而不是直接获取根节点。

可以通过 $refs 获取实例：

vue

  ref="treeRef"
  :data="treeData"
  node-key="id"
  :props="defaultProps"
/>

JavaScript
import { ref, onMounted } from "vue";

const treeRef = ref(null);

onMounted(() => {
  console.log(treeRef.value.store.root.childNodes);
});

关键点在于 store.root.childNodes，这里存储的就是第一层节点列表，也就是根节点集合。

方法三：递归过滤获取根节点数据（适用于动态处理）

在某些业务中，数据可能是动态加工后的结构，甚至需要根据条件筛选根节点。

JavaScript
function getRootNodes(data) {
  return data.filter(item => {
    return item.isRoot === true || !item.parentId;
  });
}

如果结构没有明确标识，可以通过判断层级关系实现：

JavaScript
function normalizeTree(data) {
  return data.filter(item => !item.parentId);
}

这种方式常用于后端返回扁平结构时的转换处理。

方法四：结合 lazy 加载时获取根节点

当使用懒加载时，根节点不会一次性全部加载，此时需要借助 load 方法处理第一层数据。

vue

  :load="loadNode"
  lazy
  node-key="id"
/>

JavaScript
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    // 根节点数据
    resolve([
      { id: 1, label: "根节点A" },
      { id: 2, label: "根节点B" }
    ]);
  } else {
    // 子节点数据
    resolve([]);
  }
};

这里通过 node.level === 0 可以准确判断是否为根节点加载阶段。

方法五：通过 store API 精确获取根节点

el-tree 内部使用 store 管理节点状态，可以通过更底层的 API 获取完整结构：

JavaScriptconst rootNodes = treeRef.value.store.root.childNodes.map(node => node.data);

这种方式的优势在于：

• 可以获取经过组件处理后的数据

• 支持选中状态、展开状态等完整节点信息

适用于需要结合 UI 状态进行逻辑判断的场景。

常见误区与注意点

很多开发者会误以为 getCurrentKey() 或 getCurrentNode() 能获取根节点，但它们只与当前选中状态有关，并不代表树的层级结构。

另一个常见问题是直接操作 DOM 或试图从渲染结果中提取数据，这种方式不仅不稳定，也不符合 Vue 的数据驱动原则。

实战建议

在真实项目中，根节点数据最好始终由业务数据源控制，而不是依赖组件内部状态。推荐做法是：

• 后端返回标准树结构

• 前端直接使用原始数据作为根节点来源

• 仅在特殊场景使用 store.root.childNodes

这样可以避免数据不同步问题，也能提升维护性。

当树结构复杂度增加（如权限系统、菜单系统），清晰的根节点管理会直接影响整个系统的可扩展性。