Vue組件tree怎么實現樹形菜單

# Vue組件tree怎么實現樹形菜單

在Vue項目中實現樹形菜單（Tree Menu）是常見需求，適用于文件目錄、組織架構等場景。本文將介紹基于遞歸組件和第三方庫的兩種實現方案。

## 一、遞歸組件實現方案

### 核心思路
通過組件遞歸調用自身實現無限層級嵌套，適合輕量級需求。

```html
<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <span @click="toggle(node)">{{ node.label }}</span>
      <tree-menu 
        v-if="node.children && node.expanded" 
        :tree-data="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu', // 遞歸組件必須命名
  props: {
    treeData: Array
  },
  methods: {
    toggle(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

數據結構要求

[
  {
    id: 1,
    label: '節點1',
    expanded: true,
    children: [
      { id: 11, label: '子節點1' }
    ]
  }
]

二、使用第三方庫

推薦使用成熟組件庫提高開發效率：

1. Element UI Tree

<el-tree
  :data="treeData"
  :props="defaultProps"
  @node-click="handleNodeClick"
/>

2. Vue Ant Design

<a-tree
  v-model:expandedKeys="expandedKeys"
  :tree-data="treeData"
/>

三、關鍵實現技巧

1. 性能優化：

   • 大數據量時使用虛擬滾動（如vue-virtual-scroller）
   • 添加node-key屬性提高Diff效率

2. 交互增強：

   // 動態加載子節點
   async loadNode(node, resolve) {
    if (node.level === 0) return resolve([{ name: '根節點' }])
    const res = await api.getChildren(node.id)
    resolve(res.data)
   }
   

3. 樣式定制：

   .tree-node {
    transition: all 0.3s;
    &.is-expanded > .label:before {
      transform: rotate(90deg);
    }
   }
   

四、完整示例代碼

GitHub示例倉庫 包含以下功能： - 復選框聯動 - 懶加載實現 - 右鍵上下文菜單 - 拖拽排序

總結

根據項目復雜度選擇合適的實現方式，中小項目建議從遞歸組件開始理解原理，大型項目推薦使用專業組件庫。 “`

注：實際使用時請根據項目需求調整代碼，示例中的api.getChildren()等需要替換為實際接口調用。