在 Vue3 项目中使用 el-tree

文章目录

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

一、基础用法

1. 引入组件

vue 复制代码

<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（点击节点选中）

vue 复制代码

<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 控制）

vue 复制代码

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

3. 自定义节点内容

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

vue 复制代码

<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 实现节点搜索功能：

vue 复制代码

<template>
  <el-input
    v-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 方法获取选中的节点（复选框模式）：

vue 复制代码

<template>
  <el-button @click="getChecked">获取选中节点</el-button>
  <el-tree
    ref="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 事件实现节点的懒加载（按需加载子节点）：

vue 复制代码

<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>