在 Vue3 项目中使用 el-tree

在 Vue3 项目中使用 el-tree

一、基础用法

1. 引入组件

<template><el-tree:data="treeData":props="defaultProps"@node-click="handleNodeClick"/>
</template><script setup>// 树形数据
const treeData = [{label: '一级节点 1',children: [{label: '二级节点 1-1',children: [{ label: '三级节点 1-1-1' }]}]},{label: '一级节点 2'}
]// 配置项（映射数据中的字段）
const defaultProps = {children: 'children', // 子节点字段名label: 'label' // 显示文本的字段名
}// 节点点击事件
const handleNodeClick = (data, node, event) => {console.log('点击节点:', data, node, event)
}
</script>

二、常用功能与配置

1. 节点选择（复选框 / 单选）

• 复选框：添加 show-checkbox 属性，支持多选
• 单选：结合 check-strictly（父子不关联）和 check-on-click-node（点击节点选中）

<el-tree:data="treeData":props="defaultProps"show-checkbox  <!-- 显示复选框 -->check-strictly  <!-- 父子节点不关联 -->check-on-click-node  <!-- 点击节点即可选中 -->@check-change="handleCheckChange"  <!-- 选中状态变化事件 -->
/><script setup>
// 选中状态变化事件
const handleCheckChange = (data, checked, indeterminate) => {console.log('选中变化:', data, checked, indeterminate)
}
</script>

2. 展开 / 折叠控制

• default-expand-all：默认展开所有节点
• expand-on-click-node：点击节点时展开 / 折叠（默认 true）
• :default-expanded-keys：默认展开指定节点（通过节点 id 控制）

<el-tree:data="treeData":props="defaultProps":default-expanded-keys="[1, 3]"  <!-- 默认展开 id 为 1 和 3 的节点 -->:expand-on-click-node="false"  <!-- 点击节点不展开，仅通过箭头控制 -->
/>

3. 自定义节点内容

通过 scoped-slot 自定义节点显示内容（如添加图标、按钮等）：

<el-tree :data="treeData" :props="defaultProps"><!-- 自定义节点内容 --><template #default="{ node, data }"><div class="custom-node"><el-icon v-if="data.children"><Folder /></el-icon><el-icon v-else><Document /></el-icon><span>{{ node.label }}</span><el-button size="mini" @click.stop="handleEdit(data)">编辑</el-button></div></template>
</el-tree><script setup>
import { Folder, Document } from '@element-plus/icons-vue'const handleEdit = (data) => {console.log('编辑节点:', data)
}
</script>

4. 搜索过滤节点

结合 filter-method 实现节点搜索功能：

<template><el-inputv-model="filterText"placeholder="输入关键词搜索"style="margin-bottom: 10px"/><el-tree:data="treeData":props="defaultProps":filter-method="filterNode"ref="treeRef"/>
</template><script setup>
import { ref, watch } from 'vue'const filterText = ref('')
const treeRef = ref(null)// 过滤方法
const filterNode = (value, data) => {if (!value) return true// 匹配节点文本（支持模糊搜索）return data.label.toLowerCase().includes(value.toLowerCase())
}// 监听搜索文本变化，触发过滤
watch(filterText, (val) => {treeRef.value.filter(val)
})
</script>

5. 获取选中节点

通过组件的 getCheckedNodes 方法获取选中的节点（复选框模式）：

<template><el-button @click="getChecked">获取选中节点</el-button><el-treeref="treeRef":data="treeData":props="defaultProps"show-checkbox/>
</template><script setup>
import { ref } from 'vue'const treeRef = ref(null)const getChecked = () => {// 获取所有选中节点（参数为 true 时仅返回叶子节点）const checkedNodes = treeRef.value.getCheckedNodes(false, false)console.log('选中节点:', checkedNodes)
}
</script>

三、动态加载节点

对于大数据场景，可通过 load 事件实现节点的懒加载（按需加载子节点）：

<el-tree:data="treeData":props="defaultProps"lazy  <!-- 启用懒加载 -->:load="loadNode"  <!-- 加载子节点的方法 -->ref="treeRef"
/><script setup>
const loadNode = (node, resolve) => {// 根节点（level 为 0）初始加载if (node.level === 0) {return resolve([{ label: '初始节点', id: 1 }])}// 加载子节点（模拟异步请求）setTimeout(() => {const childNodes = [{ label: `子节点 ${node.data.id}-1`, id: `${node.data.id}-1` },{ label: `子节点 ${node.data.id}-2`, id: `${node.data.id}-2` }]resolve(childNodes)}, 500)
}
</script>