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

elementui树状

2026-01-16 16:32:00前端教程

ElementUI 树形组件使用指南

ElementUI 提供了 el-tree 组件，用于展示树形结构数据，支持节点展开/折叠、多选、懒加载等功能。以下是其核心用法及示例代码。

基础树形结构

通过 data 属性传入树形数据，每个节点需包含 label（显示文本）和 children（子节点）字段。

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

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级节点 1',
          children: [
            { label: '二级节点 1-1' },
            { label: '二级节点 1-2' }
          ]
        },
        {
          label: '一级节点 2',
          children: [
            { label: '二级节点 2-1' },
            { label: '二级节点 2-2' }
          ]
        }
      ]
    };
  }
};
</script>

自定义节点内容

通过 scoped slot 自定义节点显示内容，使用 #default="{ node, data }" 获取当前节点信息。

<el-tree :data="treeData">
  <template #default="{ node, data }">
    <span>{{ node.label }}</span>
    <span style="color: #999; margin-left: 10px;">{{ data.description || '' }}</span>
  </template>
</el-tree>

节点选择与事件

通过 show-checkbox 开启多选，监听 check-change 事件获取选中节点。

<el-tree
  :data="treeData"
  show-checkbox
  @check-change="handleCheckChange"
></el-tree>

<script>
export default {
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    }
  }
};
</script>

懒加载子节点

通过 lazy 和 load 方法实现动态加载子节点，适用于大数据量场景。

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

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        resolve([{ name: 'Region 1' }, { name: 'Region 2' }]);
      } else {
        // 模拟异步加载子节点
        setTimeout(() => {
          resolve([
            { name: 'Leaf ' + node.level, leaf: true }
          ]);
        }, 500);
      }
    }
  }
};
</script>

常用属性与方法

属性
- default-expand-all：默认展开所有节点。
- node-key：指定节点唯一标识字段（如 id）。
- expand-on-click-node：点击节点时展开/折叠。
方法
- getCheckedNodes()：获取选中的节点数组。
- setCheckedKeys(keys)：通过 key 设置选中状态。

<el-tree
  ref="tree"
  :data="treeData"
  show-checkbox
  node-key="id"
></el-tree>

<button @click="getChecked">获取选中节点</button>

<script>
export default {
  methods: {
    getChecked() {
      const nodes = this.$refs.tree.getCheckedNodes();
      console.log(nodes);
    }
  }
};
</script>