element-ui实现三级或多级导航菜单循环项⽬中,菜单导航需要多级循环!
<el-menu router>
<div v-for="(item,index) in submenuList" :key="index">
<!-- ⼀级菜单(没有任何⼦级菜单)-->
<el-menu-item :index="item.path" v-if="!uList">{{item.title}}</el-menu-item>
<!-- ⼀级菜单(有⼦级菜单)-->
<el-submenu :index="item.path" v-else>
<template slot="title">{{item.title}}</template>
<!-- 遍历⼆级菜单容器 -->
<div v-for="(i,index) uList" :key="index">
<!-- 判断⼆级菜单(没有三级菜单)-->
<el-menu-item :index="i.path" v-if="!i.list">{{i.title}}</el-menu-item>
<!-- 判断⼆级菜单(有三级菜单)-->
<el-submenu :index="i.path" v-if="i.list">
<template slot="title">{{i.title}}</template>
<el-menu-item :index="j.path" v-for="(j,index) in i.list" :key="index">{{j.title}}      </el-menu-item>
</el-submenu>
</div>
</el-submenu>
</div>
</el-menu>
submenuList:[
{
title:'概况',
path:'/',
icon:'el-icon-menu'
},
{
title:'商铺',
path:'/shop',
icon:'el-icon-menu',
menuList:[
{
title:'商铺设置',
path:'/shop/overview',导航菜单
list:[
{
title:'商铺分类',
path:'/',
},
{
title:'商铺采集',
path:'/',
}
]
},
{
title:'标签设置',
path:'/shop/labels'
}
]
},
{
title:'订单',
path:'/order',
icon:'el-icon-menu',
menuList:[
{
{
title:'订单设置',
path:'/order/setting'            },
{
title:'列表',
path:'/order/group',              list:[
{
title:'团购分类',                  path:'/',
},
{
title:'团购采集',                  path:'/',
}
]
}
]
}
]

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。