如何在 Vue3 项目中使用 el-tree

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

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

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

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

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

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

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