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

1、需求说明

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

2、需求实现

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: []
        }
    }
}
复制代码