一、需求说明
- 通过后端返回的嵌套数据,动态渲染出多层级的树状菜单
- 有两种类型的菜单,一种不能点击,只能下拉打开(菜单),一种可以点击(功能),通过
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: []
}
}
}