<template>
<el-menu router style="margin-top: 20px">
<div v-for="(item, index) in submenuList" :key="index">
<!-- 一级菜单(没有任何子级菜单)-->
<el-menu-item :index="item.path" v-if="!item.menuList">
<i :class="item.icon"></i>
{{ item.title }}
</el-menu-item>
<!-- 一级菜单(有子级菜单)-->
<el-submenu :index="item.path" v-else>
<template slot="title">
<i :class="item.icon"></i>
{{ 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>
</template>
<script>
export default{
data(){
return{
NavigateItem: [
{
title: "首页",
key: "1",
path: "",
items: [],
icon:'el-icon-s-home'
},
{
title: "基础数据",
key: "2",
path: "",
icon:'el-icon-menu',
children: [
{
title: "选项1",
key: "2-1",
path: "",
},
{
title: "选项2",
key: "2-2",
path: "",
},
],
},
{
title: "xxxx",
key: "3",
path: "",
icon:'el-icon-setting',
children: [
{
title: "选项1",
key: "3-1",
path: "",
},
{
title: "选项2",
key: "3-2",
path: "",
},
],
},
{
title: "xxxx",
key: "4",
path: "",
icon:'el-icon-setting',
children: [
{
title: "选项1",
key: "4-1",
path: "",
},
{
title: "选项2",
key: "4-2",
path: "",
},
],
},
{
title: "账号管理",
key: "4",
path: "",
icon:'el-icon-setting',
children: [
{
title: "选项1",
key: "4-1",
path: "",
},
{
title: "选项2",
key: "4-2",
path: "",
},
],
children:[
//三级路由
title: "选项1",
key: "4-2-3",
path: "",
},
]
},
],
}
}
}
</script>
element-ui侧边栏生成
最新推荐文章于 2024-06-26 09:51:03 发布
该代码示例展示了如何在Vue.js中使用el-menu组件创建带有子菜单的多级导航菜单。通过v-for循环遍历数据结构,动态生成一级、二级甚至三级菜单项,菜单项的显示依赖于数据中的path、icon和title属性。
摘要由CSDN通过智能技术生成