PC 项目实战(一)- el-menu 递归渲染无限极树状菜单

3,865 阅读1分钟

一、需求说明

  1. 通过后端返回的嵌套数据,动态渲染出多层级的树状菜单
  2. 有两种类型的菜单,一种不能点击,只能下拉打开(菜单),一种可以点击(功能),通过 menuType 字段区分

二、需求实现

2.1 封装一个子菜单组件,并在组件中使用自身:

<template>
  <div>
    <template v-for="(menu, index) in menus">
      <!-- 类型为菜单时,使用 el-submenu -->
      <el-submenu v-if="menu.menuType == 1" :index="menu.menuId" :key="menu.menuId">
        <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.menuName}}</span>
        </template>
	 <!-- 只有菜单有下级,所以放在这个位置 -->
        <menu-list :menus="menu.menuList"></menu-list>
      </el-submenu>
      <!-- 类型为功能时,使用 el-menu-item -->
      <el-menu-item v-if="menu.menuType == 2" :index="((index+1).toString()+ '-' + (index+1).toString())" :key="menu.menuId">   <!--一级菜单功能-->
          <router-link :to="menu.functionUrl" @click.native="flushCom(menu.functionUrl)">{{menu.menuName}}</router-link>
      </el-menu-item>
    </template>
  </div>
</template>
export default {
    props: ['menus'],
    name: 'MenuList',
}

注意:使用自身组件时,不需要引入,只需要把 name 属性定义好即可

2.2 使用这个组件:

<el-menu>
    <menu-list :menus="menuList"></menu-list>
</el-menu>
export default {
    components: {
        menuList: () => import("./components/menuList.vue")
    },
    data() {
        return {
            menuList: []
        }
    }
}