在 Vue3 项目中使用 el-tree

文章目录

- - 一、基础用法
    - - 1. 引入组件
    - 二、常用功能与配置
    - - 1. 节点选择（复选框 / 单选）
        * 2. 展开 / 折叠控制
        * 3. 自定义节点内容
        * 4. 搜索过滤节点
        * 5. 获取选中节点
    - 三、动态加载节点

一、基础用法

1. 引入组件

1<template>
2  <el-tree
3    :data="treeData"
4    :props="defaultProps"
5    @node-click="handleNodeClick"
6  />
7</template>
8
9<script setup>
10
11// 树形数据
12const treeData = [
13  {
14    label: '一级节点 1',
15    children: [
16      {
17        label: '二级节点 1-1',
18        children: [
19          { label: '三级节点 1-1-1' }
20        ]
21      }
22    ]
23  },
24  {
25    label: '一级节点 2'
26  }
27]
28
29// 配置项（映射数据中的字段）
30const defaultProps = {
31  children: 'children', // 子节点字段名
32  label: 'label' // 显示文本的字段名
33}
34
35// 节点点击事件
36const handleNodeClick = (data, node, event) => {
37  console.log('点击节点:', data, node, event)
38}
39</script>
40

二、常用功能与配置

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

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

1<el-tree
2  :data="treeData"
3  :props="defaultProps"
4  show-checkbox  <!-- 显示复选框 -->
5  check-strictly  <!-- 父子节点不关联 -->
6  check-on-click-node  <!-- 点击节点即可选中 -->
7  @check-change="handleCheckChange"  <!-- 选中状态变化事件 -->
8/>
9
10<script setup>
11// 选中状态变化事件
12const handleCheckChange = (data, checked, indeterminate) => {
13  console.log('选中变化:', data, checked, indeterminate)
14}
15</script>
16

2. 展开 / 折叠控制

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

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

3. 自定义节点内容

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

1<el-tree :data="treeData" :props="defaultProps">
2  <!-- 自定义节点内容 -->
3  <template #default="{ node, data }">
4    <div class="custom-node">
5      <el-icon v-if="data.children"><Folder /></el-icon>
6      <el-icon v-else><Document /></el-icon>
7      <span>{{ node.label }}</span>
8      <el-button size="mini" @click.stop="handleEdit(data)">编辑</el-button>
9    </div>
10  </template>
11</el-tree>
12
13<script setup>
14import { Folder, Document } from '@element-plus/icons-vue'
15
16const handleEdit = (data) => {
17  console.log('编辑节点:', data)
18}
19</script>
20

4. 搜索过滤节点

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

1<template>
2  <el-input
3    v-model="filterText"
4    placeholder="输入关键词搜索"
5    style="margin-bottom: 10px"
6  />
7  <el-tree
8    :data="treeData"
9    :props="defaultProps"
10    :filter-method="filterNode"
11    ref="treeRef"
12  />
13</template>
14
15<script setup>
16import { ref, watch } from 'vue'
17
18const filterText = ref('')
19const treeRef = ref(null)
20
21// 过滤方法
22const filterNode = (value, data) => {
23  if (!value) return true
24  // 匹配节点文本（支持模糊搜索）
25  return data.label.toLowerCase().includes(value.toLowerCase())
26}
27
28// 监听搜索文本变化，触发过滤
29watch(filterText, (val) => {
30  treeRef.value.filter(val)
31})
32</script>
33

5. 获取选中节点

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

1<template>
2  <el-button @click="getChecked">获取选中节点</el-button>
3  <el-tree
4    ref="treeRef"
5    :data="treeData"
6    :props="defaultProps"
7    show-checkbox
8  />
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const treeRef = ref(null)
15
16const getChecked = () => {
17  // 获取所有选中节点（参数为 true 时仅返回叶子节点）
18  const checkedNodes = treeRef.value.getCheckedNodes(false, false)
19  console.log('选中节点:', checkedNodes)
20}
21</script>
22

三、动态加载节点

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

1<el-tree
2  :data="treeData"
3  :props="defaultProps"
4  lazy  <!-- 启用懒加载 -->
5  :load="loadNode"  <!-- 加载子节点的方法 -->
6  ref="treeRef"
7/>
8
9<script setup>
10const loadNode = (node, resolve) => {
11  // 根节点（level 为 0）初始加载
12  if (node.level === 0) {
13    return resolve([{ label: '初始节点', id: 1 }])
14  }
15  // 加载子节点（模拟异步请求）
16  setTimeout(() => {
17    const childNodes = [
18      { label: [`子节点 ${node.data.id}-1`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md), id: [`${node.data.id}-1`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md) },
19      { label: [`子节点 ${node.data.id}-2`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md), id: [`${node.data.id}-2`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.id.md) }
20    ]
21    resolve(childNodes)
22  }, 500)
23}
24</script>
25

《在 Vue3 项目中使用 el-tree》是转载文章，点击查看原文。