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

elementui tree

2026-01-15 20:20:50前端教程

ElementUI Tree 组件

ElementUI 的 Tree 组件是一个基于 Vue.js 的树形控件，用于展示层级数据。它支持节点的展开、折叠、选择、懒加载等功能，适用于文件目录、组织架构等场景。

基本用法

Tree 组件的基本用法是通过 data 属性传入树形数据，每个节点需要包含 label 和 children 属性：

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

对应的数据格式如下：

data: [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    children: [{
      label: '三级 1-1-1'
    }]
  }]
}]

节点选择

Tree 组件支持单选和多选模式。通过 show-checkbox 属性可以开启多选：

<el-tree :data="data" show-checkbox></el-tree>

懒加载

对于大数据量的树形结构，可以使用懒加载来优化性能。通过 lazy 和 load 属性实现：

elementui tree

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

对应的 JavaScript 代码：

props: {
  label: 'name',
  children: 'zones'
},
loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: 'region' }]);
  }
  if (node.level > 1) return resolve([]);
  setTimeout(() => {
    const data = [{
      name: 'leaf',
      leaf: true
    }, {
      name: 'zone'
    }];
    resolve(data);
  }, 500);
}

自定义节点内容

可以通过 scoped slot 自定义节点的内容：

<el-tree :data="data">
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>{{ node.label }}</span>
    <span>
      <el-button type="text" size="mini" @click="append(data)">添加</el-button>
    </span>
  </span>
</el-tree>

节点过滤

Tree 组件支持通过关键字过滤节点，使用 filter-node-method 属性：

elementui tree

<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
<el-tree
  :data="data"
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

对应的 JavaScript 代码：

filterText: '',
watch: {
  filterText(val) {
    this.$refs.tree.filter(val);
  }
},
filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

节点操作

Tree 组件提供了一系列方法用于操作节点，例如 getCheckedNodes、getCheckedKeys、setCheckedNodes 等：

// 获取选中的节点
this.$refs.tree.getCheckedNodes()
// 获取选中的节点 key
this.$refs.tree.getCheckedKeys()
// 设置选中的节点
this.$refs.tree.setCheckedNodes(nodes)

事件

Tree 组件提供了多个事件，例如 node-click、check-change、node-expand 等：

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

对应的 JavaScript 代码：

handleNodeClick(data, node, component) {
  console.log(data, node, component);
},
handleCheckChange(data, checked, indeterminate) {
  console.log(data, checked, indeterminate);
}