vue侧边栏动态生成下级菜单的方法侧边栏动态生成下级菜单的方法
今天小编就为大家分享一篇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: '订单一览'
},{
评论0