vue el-menu多级菜单递归

其他router相关内容索引

序号	内容	连接地址
1	vue router 整合引入	https://blog.csdn.net/qq_21271511/article/details/109368459
2	vue router 模块化开发	https://blog.csdn.net/qq_21271511/article/details/109369247
3	vue router 动态路由及菜单实现之一	https://blog.csdn.net/qq_21271511/article/details/109496415
4	vue router 动态路由及菜单实现之二	https://blog.csdn.net/qq_21271511/article/details/109998976
5	vue router 动态路由及菜单实现问题汇总	https://blog.csdn.net/qq_21271511/article/details/110038256
6	vue el-menu多级菜单递归	https://blog.csdn.net/qq_21271511/article/details/109889934
7	vue router 懒加载常见写法	https://blog.csdn.net/qq_21271511/article/details/109776741

概述

在将router后台化后，菜单这块只是简单的实现了一下，由于迁入系统的东西越来越多，菜单层级也需要实现多层级，不能总是一层层的加，需要来一波递归一劳永逸。

单层级菜单实现参考

多层级菜单实现

直接一层层的拆

曾经的for循环直接一层层的拆解

<el-menu
          class="sidebar-el-menu"
          default-active=""
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          router
        >
          <!-- 遍历菜单 -->
          <template v-for="item in items">
            <!-- 含有子菜单 -->
            <template v-if="item.children">
              <!-- 第一层 含有子菜单菜单 -->
              <el-submenu :index="item.path" :key="item.path">
                <template slot="title">
                  <i :class="item.meta.icon"></i>
                  <span slot="title">{{ item.meta.title }}</span>
                </template>

                <!-- 第二层 子菜单遍历 -->
                <template v-for="subItem in item.children">

                  <!-- 第三层 子菜单含有子菜单 -->
                  <el-submenu
                    v-if="subItem.children"
                    :index="subItem.path"
                    :key="subItem.path"
                  >
                    <template slot="title">
                      <i :class="subItem.meta.icon"></i>
                      <span slot="title">{{ subItem.meta.title }}</span>
                    </template>
                    <el-menu-item
                      v-for="(threeItem, i) in subItem.children"
                      :key="i"
                      :index="threeItem.path"
                    >
                      <i :class="threeItem.meta.icon"></i>
                      <span slot="title">{{ threeItem.meta.title }}</span>
                    </el-menu-item>
                  </el-submenu>

                  <!-- 子菜单不含子菜单 -->
                  <el-menu-item
                    v-else
                    :index="subItem.path"
                    :key="subItem.path"
                  >
                    <i :class="subItem.meta.icon"></i>
                    <span slot="title">{{ subItem.meta.title }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>

            <!-- 第一层 不含子菜单  -->
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>

如果系统要求不高，直接这么写看着也挺清晰，需要加的时候再往下继续拆。

递归实现

递归就简单了，关键是怎么自身调用，相比于拆解的代码，就是将内层的拆解转成调用自身。

抽取MenuList组件

将item的children继续当成items来实现自身调用

<menu-list :items="item.children"></menu-list>

	<el-menu
          class="sidebar-el-menu"
          default-active=""
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          router
        >
          <!-- 遍历菜单 -->
          <template v-for="item in items">
            <!-- 含有子菜单 -->
            <template v-if="item.children">
              <!-- 第一层 含有子菜单菜单 -->
              <el-submenu :index="item.path" :key="item.path">
                <template slot="title">
                  <i :class="item.meta.icon"></i>
                  <span slot="title">{{ item.meta.title }}</span>
                </template>
                <menu-list :items="item.children"></menu-list><!--递归调用-->
              </el-submenu>
            </template>

            <!-- 第一层 不含子菜单  -->
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>

script方法其他的都与之前一样

export default {
    name:'MenuList',
    props: {
        items: Array,
        isCollapse:Boolean
    },
    methods:{
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    }
}

组件调用

<!-- 只能单开 unique-opened -->
<menu-list :items="items" :isCollapse="isCollapse"></menu-list><!-- 更改菜单为组件递归模式 -->

数据与原来也没有变化