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: []
        }
    }
}
複製代碼