当前位置：首页 > 前端教程

elementui tree

2026-03-05 23:38:57前端教程

Element UI Tree 组件使用指南

Element UI 提供了 Tree 组件用于展示树形结构数据，支持节点选择、懒加载、自定义节点内容等功能。以下为关键使用方法和示例。

基本用法

通过 data 属性传入树形数据即可渲染基础树结构。数据格式要求每个节点包含 label 和可选的 children 字段：

<el-tree :data="treeData"></el-tree>

data() {
  return {
    treeData: [{
      label: '一级节点',
      children: [{
        label: '二级节点'
      }]
    }]
  }
}

节点属性配置

支持通过 props 配置字段映射，适应不同数据结构：

elementui tree

<el-tree
  :data="treeData"
  :props="defaultProps">
</el-tree>

defaultProps: {
  children: 'childNodes', // 指定子节点字段名
  label: 'name' // 指定显示名称字段名
}

选择功能

启用 show-checkbox 属性可显示多选框，通过 v-model 绑定选中节点：

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2]"
  :default-checked-keys="[5]">
</el-tree>

懒加载

通过 lazy 和 load 方法实现动态加载节点数据：

elementui tree

<el-tree
  :props="props"
  :load="loadNode"
  lazy>
</el-tree>

methods: {
  loadNode(node, resolve) {
    if (node.level === 0) {
      return resolve([{ name: '根节点' }]);
    }
    if (node.level > 3) return resolve([]);

    // 模拟异步加载
    setTimeout(() => {
      resolve([{
        name: '懒加载节点'
      }]);
    }, 500);
  }
}

自定义节点内容

使用 scoped slot 可完全自定义节点渲染：

<el-tree :data="data">
  <template #default="{ node, data }">
    <span class="custom-node">
      <i :class="data.icon"></i>
      {{ node.label }}
    </span>
  </template>
</el-tree>