elementui tree
Element UI Tree 组件使用指南
Element UI 提供了 Tree 组件用于展示树形结构数据，支持节点选择、懒加载、自定义节点内容等功能。以下为关键使用方法和示例。
基本用法
通过 data 属性传入树形数据即可渲染基础树结构。数据格式要求每个节点包含 label 和可选的 children 字段：
<el-tree :data="treeData"></el-tree>data() {
return {
treeData: [{
label: '一级节点',
children: [{
label: '二级节点'
}]
}]
}
}节点属性配置
支持通过 props 配置字段映射，适应不同数据结构：
<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 方法实现动态加载节点数据：
<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>常用方法
通过 ref 调用组件方法：
getCheckedNodes()获取选中节点setCheckedKeys(keys)设置选中项filter(value)过滤树节点
this.$refs.tree.filter('searchText');注意事项
- 节点需包含唯一标识字段，通过
node-key指定 - 大数据量建议配合懒加载使用
- 样式覆盖需注意层级，避免全局污染
以上为 Element UI Tree 组件的核心功能实现方式，可根据实际需求组合使用这些特性。
