<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>
<script setup>
// 樹形數(shù)據(jù)
const treeData = [
  {
    label: '一級(jí)節(jié)點(diǎn) 1',
    children: [
      {
        label: '二級(jí)節(jié)點(diǎn) 1-1',
        children: [
          { label: '三級(jí)節(jié)點(diǎn) 1-1-1' }
        ]
      }
    ]
  },
  {
    label: '一級(jí)節(jié)點(diǎn) 2'
  }
]
// 配置項(xiàng)（映射數(shù)據(jù)中的字段）
const defaultProps = {
  children: 'children', // 子節(jié)點(diǎn)字段名
  label: 'label' // 顯示文本的字段名
}
// 節(jié)點(diǎn)點(diǎn)擊事件
const handleNodeClick = (data, node, event) => {
  console.log('點(diǎn)擊節(jié)點(diǎn):', data, node, event)
}
</script>

<el-tree
  :data="treeData"
  :props="defaultProps"
  show-checkbox  <!-- 顯示復(fù)選框 -->
  check-strictly  <!-- 父子節(jié)點(diǎn)不關(guān)聯(lián) -->
  check-on-click-node  <!-- 點(diǎn)擊節(jié)點(diǎn)即可選中 -->
  @check-change="handleCheckChange"  <!-- 選中狀態(tài)變化事件 -->
/>
<script setup>
// 選中狀態(tài)變化事件
const handleCheckChange = (data, checked, indeterminate) => {
  console.log('選中變化:', data, checked, indeterminate)
}
</script>

<el-tree
  :data="treeData"
  :props="defaultProps"
  :default-expanded-keys="[1, 3]"  <!-- 默認(rèn)展開 id 為 1 和 3 的節(jié)點(diǎn) -->
  :expand-on-click-node="false"  <!-- 點(diǎn)擊節(jié)點(diǎn)不展開，僅通過箭頭控制 -->
/>

<el-tree :data="treeData" :props="defaultProps">
  <!-- 自定義節(jié)點(diǎn)內(nèi)容 -->
  <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('編輯節(jié)點(diǎn):', data)
}
</script>

<template>
  <el-input
    v-model="filterText"
    placeholder="輸入關(guān)鍵詞搜索"
    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
  // 匹配節(jié)點(diǎn)文本（支持模糊搜索）
  return data.label.toLowerCase().includes(value.toLowerCase())
}
// 監(jiān)聽搜索文本變化，觸發(fā)過濾
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
</script>

<template>
  <el-button @click="getChecked">獲取選中節(jié)點(diǎn)</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 = () => {
  // 獲取所有選中節(jié)點(diǎn)（參數(shù)為 true 時(shí)僅返回葉子節(jié)點(diǎn)）
  const checkedNodes = treeRef.value.getCheckedNodes(false, false)
  console.log('選中節(jié)點(diǎn):', checkedNodes)
}
</script>

<el-tree
  :data="treeData"
  :props="defaultProps"
  lazy  <!-- 啟用懶加載 -->
  :load="loadNode"  <!-- 加載子節(jié)點(diǎn)的方法 -->
  ref="treeRef"
/>
<script setup>
const loadNode = (node, resolve) => {
  // 根節(jié)點(diǎn)（level 為 0）初始加載
  if (node.level === 0) {
    return resolve([{ label: '初始節(jié)點(diǎn)', id: 1 }])
  }
  // 加載子節(jié)點(diǎn)（模擬異步請求）
  setTimeout(() => {
    const childNodes = [
      { label: `子節(jié)點(diǎn) ${node.data.id}-1`, id: `${node.data.id}-1` },
      { label: `子節(jié)點(diǎn) ${node.data.id}-2`, id: `${node.data.id}-2` }
    ]
    resolve(childNodes)
  }, 500)
}
</script>