element-ui實現三級或多級導航選單迴圈
阿新 • • 發佈:2021-01-03
技術標籤:element-ui
專案中,選單導航需要多級迴圈!
<el-menu router> <div v-for="(item,index) in submenuList" :key="index"> <!-- 一級選單(沒有任何子級選單)--> <el-menu-item :index="item.path" v-if="!item.menuList">{{item.title}}</el-menu-item> <!-- 一級選單(有子級選單)--> <el-submenu :index="item.path" v-else> <template slot="title">{{item.title}}</template> <!-- 遍歷二級選單容器 --> <div v-for="(i,index) in item.menuList" :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:'/', } ] } ] } ]