前言
菜单栏数据实现从后台获取
实现
代码
<el-menu background-color="#393e46" text-color="#fff">
<el-menu-item :class="getMenuSwitchState?'close':'open'">
<i class="el-icon-position" style="color:#409eff"></i>
<span slot="title" v-if="!getMenuSwitchState">LOGO</span>
</el-menu-item>
</el-menu>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
background-color="#393e46" text-color="#fff" active-text-color="#ffd04b" :collapse="getMenuSwitchState">
<!--单级菜单-->
<el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{item.label}}</span>
</el-menu-item>
<!--多级菜单-->
<el-submenu index="index" v-for="(item,index) in hasChildren" :key="index">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{item.label}}</span> </template>
<el-menu-item-group>
<el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
{{subItem.label}}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
数据
asideMenu: [{
path: '/', //地址
label: '首页', // 菜单标识
icon: 's-home', //图标选取的是element图表,然后拼接到上面
},
{
path: "/video",
label: '视频管理',
icon: 'video-play'
},
{
path: "/user",
label: '用户管理',
icon: 'user'
},
//二级菜单
{
label: '多级菜单',
icon: 'user',
children: [{
path: "/page1",
label: '页面1',
icon: 'setting'
},
{
path: "/page2",
label: '页面1',
icon: 'user'
},
]
},
]
方法
noChildren() {
return this.asideMenu.filter(item =>
!item.children
)
},
hasChildren() {
return this.asideMenu.filter(item =>
item.children
)
}
效果