Vue中ElementUI多级导航菜单动态加载——递归

github.com/4gnosed

于 2020-03-29 17:52:59 发布

阅读量9.2k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Vue ElementUI 文章标签： vue

本文链接：https://blog.csdn.net/gnosed/article/details/105178518

在前后端分离项目中，当菜单层级关系不确定时，使用递归实现Vue动态加载ElementUI多级导航菜单。通过接收后端JSON数据，利用递归组件渲染菜单。遇到的问题是同级菜单展开关闭同步，原因是多个菜单的index值相同，解决办法是确保每个菜单的path值唯一。

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

在前后端分离项目中，前端要实现根据后端传来的json格式数据，进行多级导航菜单的动态加载，层级数目较小或者各个层级的数目固定情况下，可以编辑固定数目的父子导航组件，与后端数据对应方可。但是，后期需要调整菜单父子关系或者说动态增删菜单，会导致菜单数据层级关系不确定，比如说某一个层级菜单有2个子菜单，而与之同级的菜单有非2个子菜单，这就不能按照之前固定格式的代码进行渲染了，可以借助递归思想，将动态加载导航菜单的代码抽离出形成公共组件，下面是组件具体代码（借助ElementUI中导航栏组件）：

<template>
  <div>
    <!--叶子级菜单-->
    <template v-if="item.children && item.children.length === 0">
      <el-menu-item :key="item.id" :index="item.path">
        {
  
  {item.nameZh}}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.path" style="text-align: left">
      <span slot="title" style="font-size: 17px;">
        <i :class="item.iconCls"></i>
        {
  
  {item.nameZh}}
      </span>
      <template v-for="child in item.children">
        <navigation-item v-if="child.children && child.children.length>0" :key="