站长资源网络编程
vue侧边栏动态生成下级菜单的方法
简介循环传入的数据去生成下级菜单
微商城管理后台
循环传入的数据去生成下级菜单
<template>
<div class="headBar">
<div class="title">
微商城管理后台
</div>
<el-menu
class="el-menu-headBar"
mode="horizontal"
@select="handleSelect"
background-color="#000000"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:default-active="onRoutes" router>
<template v-for="item in items" >
<template v-if="item.subs" >
<el-submenu :index="item.index">
<template slot="title" >
{{item.title}}
</template>
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">
{{ subItem.title }}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.index">
<label>{{ item.title }}</label>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: "1",
items: [
{
icon: 'el-icon-menu',
index: '1',
title: '数据统计',
subs: [
{
index: '/monitor',
title: '客流展示'
},
{
index: '/monitor/device',
title: '设备采集'
},
{
index: '/monitor/tv',
title: '监控视频'
}
]
},{
icon: 'el-icon-goods',
index: '/product',
title: '商品管理',
},{
icon: 'el-icon-goods',
index: '/category',
title: '类目管理',
},{
icon: 'fa fa-cart-arrow-down',
index: '/order',
title: '订单一览'
},{
icon: 'fa fa-user-o',
index: '/merchant',
title: '商家信息'
},{
icon: 'el-icon-printer',
index: '9',
title: '微商城',
subs:[
{
icon: 'el-icon-printer',
index: '/banner',
title: 'banner设置'
},{
icon: 'el-icon-printer',
index: '/decoration',
title: '首页装修'
},{
icon: 'el-icon-printer',
index: '/message',
title: '消息设置'
}
]
},{
icon: 'el-icon-printer',
index: '10',
title: '线下店',
subs:[
{
icon: 'el-icon-printer',
index: '/device',
title: '设备管理'
},{
icon: 'el-icon-printer',
index: '/advertise',
title: '广告管理'
},{
icon: 'el-icon-printer',
index: '/version',
title: '版本管理'
}
]
},{
icon: 'el-icon-printer',
index: '/largeUI',
title: '大屏'
},{
icon: 'el-icon-printer',
index: '/coupon',
title: '优惠券'
}
],
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
computed:{
onRoutes(){
return this.$route.path.replace('/','');
}
}
}
</script>
<style scoped>
.el-menu-headBar {
width: 80%;
min-width: 950px;
font-size: 12px;
border-bottom: 1px #000000;
}
.headBar {
width: 100%;
height: 50px;
display: flex;
background-color: #000000;
}
.title {
background-color: #ffdb15;
color: #000;
height: 100%;
min-width: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
font-size: 17px;
}
</style>
以上这篇vue侧边栏动态生成下级菜单的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。