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

elementui树状

2026-03-06 00:17:02前端教程

ElementUI 树形组件使用指南

ElementUI 提供 el-tree 组件用于展示树形结构数据，支持节点选择、展开/折叠、懒加载等功能。

基础用法

通过 data 属性传入树形数据，默认使用 label 作为节点显示文本，children 作为子节点字段：

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

对应数据格式：

treeData: [{
  label: '一级节点',
  children: [{
    label: '二级节点'
  }]
}]

自定义节点内容

使用 scoped slot 自定义节点内容和样式：

<el-tree :data="data">
  <span slot-scope="{ node, data }" class="custom-node">
    <span>{{ node.label }}</span>
    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
  </span>
</el-tree>

节点选择配置

通过 show-checkbox 开启复选框，check-strictly 控制父子节点是否关联：

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :check-strictly="true">
</el-tree>

懒加载模式

对于大数据量场景，使用 lazy 和 load 方法实现动态加载：

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

对应方法：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根节点' }]);
  }
  // 异步加载子节点
  setTimeout(() => {
    resolve([{ name: '子节点' }]);
  }, 500);
}

常用事件处理

<el-tree
  :data="data"
  @node-click="handleNodeClick"
  @check-change="handleCheckChange">
</el-tree>

事件处理函数：

handleNodeClick(data, node) {
  console.log('点击节点:', data);
},
handleCheckChange(data, checked) {
  console.log('复选框变化:', data, checked);
}

自定义图标

通过 icon-class 属性或插槽自定义节点图标：

<el-tree :data="data">
  <i slot="expand-icon" class="el-icon-arrow-right"></i>
  <i slot="collapse-icon" class="el-icon-arrow-down"></i>
</el-tree>

节点过滤

使用 filter-node-method 实现节点过滤：

<el-input v-model="filterText"></el-input>
<el-tree
  :data="data"
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

过滤方法：

filterNode(value, data) {
  return data.label.includes(value);
}

可拖拽树

启用 draggable 属性实现节点拖拽：

<el-tree
  :data="data"
  draggable
  @node-drop="handleDrop">
</el-tree>

性能优化建议

大数据量情况下启用 :props="{ children: 'children', label: 'label' }" 明确指定字段名；需要默认展开节点时使用 default-expanded-keys 而非 default-expand-all；懒加载模式下合理设置 leaf 属性标识叶子节点。

elementui树状