菜单树实现vue

实现 Vue 菜单树的方法

使用递归组件实现菜单树

递归组件是 Vue 中实现树形结构的常用方法。通过组件调用自身，可以轻松处理嵌套的菜单数据。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <menu-tree v-if="item.children" :menu-data="item.children"></menu-tree>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuTree',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门处理树形结构的 Vue 组件库：

• Vue Tree：轻量级树组件
• Element UI Tree：功能丰富的企业级树组件
• Vuetify Treeview：Material Design 风格的树组件

动态加载菜单数据

当菜单数据量较大时，可以采用动态加载的方式优化性能：

methods: {
  loadChildren(parentId) {
    api.getMenuChildren(parentId).then(children => {
      this.$set(this.menuData, parentId, children)
    })
  }
}

样式和交互优化

为菜单树添加展开/折叠功能：

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <span @click="toggle(item)">
        {{ item.name }}
        <span v-if="item.children">[{{ item.expanded ? '-' : '+' }}]</span>
      </span>
      <menu-tree 
        v-if="item.children && item.expanded" 
        :menu-data="item.children">
      </menu-tree>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

路由集成

将菜单树与 Vue Router 集成，实现导航功能：

<template>
  <ul>
    <li v-for="item in menuData" :key="item.path">
      <router-link :to="item.path">
        {{ item.name }}
      </router-link>
      <menu-tree 
        v-if="item.children" 
        :menu-data="item.children">
      </menu-tree>
    </li>
  </ul>
</template>

权限控制

根据用户权限过滤显示的菜单项：

computed: {
  filteredMenu() {
    return this.menuData.filter(item => {
      return this.hasPermission(item.requiredRole)
    })
  }
}