el-menu导航菜单的二次封装（递归组件）实现动态多级菜单

问题描述

在后台管理项目中，牵涉到权限的东西多数是后端传递过来的数据，前端去展示（当然前端也会做一些控制）。就导航菜单而言，也不能写死了，需要在用户登录了以后，发请求获取用户的对应菜单数据，根据对应的数据去展示对应的菜单。

本文记录一下使用组件递归的方式，封装一个动态的、多级的导航菜单，从而实现动态效果。

看这篇文章之前，可以看看我之前的《vue组件的递归自调用~代码思路分析》文章，本篇文章是之前文章的延伸。地址如下： juejin.cn/post/701413…

效果图

我们先看一下效果图：

思路分析

• 首先，我们要和后端沟通返回的数据格式，我们知道前端的el-menu菜单的核心数据属性有四个：
  • 菜单的名字name
  • 点击菜单进行路由跳转的路径path
  • 菜单上小图标icon
  • 菜单是不是最内层的菜单，即children是否是空数组，当children为空的时候，就说明到菜单最里层了。（最里层的菜单children为空数组的时候，点击的时候，做路由跳转）
• 所以需要有name、path、icon、children属性，且得是一个树结构的格式，和左侧导航菜单保持一致。
• 这里我们模拟一下后端返回的代码

后端返回的el-menu菜单数据

menuArr: [
    {
// 注意！注意！有children的菜单项，path不会使用的，所以path为什么都无所谓；没children的，即children的length等于0的，才会使用path属性做路由跳转
      name: "前端三大框架",
      path: "前端三大框架", 
      icon: "el-icon-star-off",
      children: [
        {
          name: "vue页面",
          path: "/vue",
          icon: "el-icon-star-off",
          children: [],
        },
        {
          name: "react页面",
          path: "/react",
          icon: "el-icon-star-off",
          children: [],
        },
        {
          name: "angular页面",
          path: "/angular",
          icon: "el-icon-star-off",
          children: [],
        },
      ],
    },
    {
      name: "后端两大框架",
      path: "后端两大框架",
      icon: "el-icon-star-off",
      children: [
        {
          name: "Spring Boot页面",
          path: "/springBoot",
          icon: "el-icon-star-off",
          children: [],
        },
        {
          name: "Spring页面",
          path: "Spring页面", 
          icon: "el-icon-star-off",
          children: [
            {
              name: "MySql页面",
              path: "/mysql",
              icon: "el-icon-star-off",
              children: [],
            },
            {
              name: "Redis页面",
              path: "/redis",
              icon: "el-icon-star-off",
              children: [],
            },
          ],
        },
        {
          name: "Mybatis页面",
          path: "/mybatis",
          icon: "el-icon-star-off",
          children: [],
        },
      ],
    },
  ]
复制代码

我们先看一下非动态多级菜单的写法，然后再看一下递归组件动态多级菜单的写法

非动态多级菜单（写死了，不灵活，不建议使用）

<el-menu
  :default-active="activeIndex"
  class="elMenu"
  background-color="#333"
  text-color="#B0B0B2"
  active-text-color="#fff"
  :unique-opened="true"
  router
  ref="elMenu"
  @select="menuSelect"
>

  <el-submenu index="非叶子节点也需要index属性">
    <template slot="title">
      <i class="el-icon-star-off"></i>
      <span>前端三大框架</span>
    </template>
    <!-- 这个是没子节点的 没有子内容，用el-menu-item结构 -->
    <el-menu-item index="/vue">
      <i class="el-icon-star-off"></i>
      <span slot="title">vue页面</span>
    </el-menu-item>
    <el-menu-item index="/react">
      <i class="el-icon-star-off"></i>
      <span slot="title">react页面</span>
    </el-menu-item>
    <el-menu-item index="/angular">
      <i class="el-icon-pear"></i>
      <span slot="title">angular页面</span>
    </el-menu-item>
  </el-submenu>
  
  <el-submenu index="非叶子节点也需要index属性哦">
    <template slot="title">
      <i class="el-icon-star-off"></i>
      <span>后端两大框架</span>
    </template>
    <el-menu-item index="/springBoot">
      <i class="el-icon-star-off"></i>
      <span slot="title">Spring Boot页面</span>
    </el-menu-item>

      <!-- 注意看这里有子节点的无子节点的html标签的区别 -->

      <!-- 这个是有子节点的 还有子内容，用el-submenu结构-->
      <el-submenu index="非叶子节点也需要index属性哈">
          <template slot="title">
            <i class="el-icon-star-off"></i>
            <span>Spring页面</span>
          </template>
          <el-menu-item index="/mysql">
            <i class="el-icon-star-off"></i>
            <span slot="title">MySql页面</span>
          </el-menu-item>
          <el-menu-item index="/redis">
            <i class="el-icon-star-off"></i>
            <span slot="title">Redis页面</span>
          </el-menu-item>
      </el-submenu>

      <!-- 这个是没子节点的 没有子内容，用el-menu-item结构 -->
      <el-menu-item index="/mybatis">
          <i class="el-icon-star-off"></i>
          <span slot="title">Mybatis页面</span>
      </el-menu-item>

  </el-submenu>
</el-menu>
复制代码

发现规律

通过上述代码，我们发现，el-menu代码大致分为两类，有子集和没有子集的

• 有子集：用的是el-submenu标签包template标签指定名字跟很多个el-menu-item标签
• 没子集：直接用很多个el-menu-item标签

得出上述规律，我们就能使用递归组件方式去封装一个动态菜单

动态菜单代码

外层菜单部分

html部分

<el-menu
  :default-active="activeIndex"
  class="elMenu"
  background-color="#333"
  text-color="#B0B0B2"
  active-text-color="#fff"
  :unique-opened="true"
  router
  ref="elMenu"
  @select="menuSelect"
>

  <!-- 递归动态菜单 -->
  <myitem :data="menuArr"></myitem>

</el-menu>
复制代码

js部分

import myitem from "./components/myitem.vue"; // 引入递归菜单组件
export default {
  name: "Home",
  components: {
    myitem, // 注册一下
  },
  data() {
    return {
      activeIndex: this.$route.path,
      menuArr: [...] // 数据是上述我们模拟的数据，#后端返回的el-menu菜单数据#
    };
  }
};
复制代码

内层递归菜单项部分

<template>
  <div>
    <template v-for="(item, index) in data">
      <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：                         -->
      <el-submenu
        :key="index"
        :index="item.path"
        v-if="item.children.length > 0"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>
        <myitem :data="item.children"></myitem>
      </el-submenu>
      <!-- 情况二：没子集的情况： -->
      <el-menu-item :key="index" v-else :index="item.path">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "myitem",
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  // 注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
};
</script>
复制代码

完整代码

完整代码我上传到Gitee上去了，欢迎大家下载查看，这样更加方便理解。

地址：gitee.com/ah-shuai/dy…