antdesign vue 2.0 递归菜单_使用vue实现动态导航菜单

最新推荐文章于 2025-05-26 17:51:53 发布

最新推荐文章于 2025-05-26 17:51:53 发布 · 1.7k 阅读

文章标签：

#antdesign vue 2.0 递归菜单 #vue element admin 动态菜单 #vue 根据后台数据判断显示 #vue项目的菜单权限判断的实现

通过Vue和AntDesign Vue 2.0，可以实现根据后台动态数据生成多级导航菜单。本文介绍了如何创建Menu和MenuItem组件，通过递归处理数据，实现菜单的动态渲染。菜单数据包含children属性，用于判断并展示子菜单，以此递归实现任意层级的菜单结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般像下图这种多级导航菜单都是动态的后台可配置的，前端根据获取的json数据直接显示出对应的导航目录。

数据格式为:

[
  {
    "id":1,
    "title":"菜单1",
    "children":[
      {
        "id":11,
        "title":"菜单11"
      }
    ]
  },
  {
  "id":2,
    "title":"菜单2",
    "children":[
      {
        "id":21,
        "title":"菜单21"
      }
    ]
  }
  .......
]

就以vue为例实现这个功能。

1、先创建两个组件 Menu 和 MenuItem，分别代表菜单主体和每一个菜单项，使用时候只需要给 Menu 组件传入数据 data 即可

App.vue

'menuList'>

2、Menu组件就是一个ul包裹的容器，遍历传入的data数据，每一项都是一个一级菜单(MenuItem)，把每一个一级菜单的数据 item 传入MenuItem 组件

Menu.vue

"item in data">'item' :key="item.id" />

3、每个 MenuItem 组件，都是一个菜单项，用 li 标签包裹，获取传过来的数据，判断当前项如果有 children 属性，说明该项有二级菜单，则需要再此遍历 children，会发现和第一级的逻辑一样，只需要把每一项数据再传递给MenuItem，依次递归、三级、四级......

MenuItem.vue

"isShow=!isShow">
  {{item.title}}"item.children">"!isShow">+-

"item.children && isShow">"subItem in item.children">'subItem' :key="subItem.id" />

这样就实现了动态菜单