首先明确目标,按照elementui官方的demo,多级水平导航的代码如下:
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
以上的demo为三级导航,出于需求的考虑,导航的数据最好是动态的数据,即从后端获得到的json数据。
所以,在elementUI官方的demo下,做动态导航。不管实现的思路是如何,但是有一点可以明确,我们动态导航最终的代码需和上面的demo代码一样,所以,开始动手吧。
(VUE的路由或者其他此处都省略,只上动态导航的核心代码)
##step1:创建一个Nav组件和NavItem组件。
##step2:Nav组件代码为:
<template>
<el-menu router unique-opened :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
<template v-for="(item, index) in nav">
<nav-item :key="index" :item="item" :nav-index="index"></nav-item>
</template>
</el-menu>
</template>
释:
1.Nav组件调用了NavItem组件,并向子组件传递了数据item和nav-index,(细心看代码的人,可能发现我为什么用了一个template标签,原本我不用template标签时,把v-for表达式放在使用时,一触发多级导航的时候就会报:Maximum call stack size exceeded栈溢出)
2.:default-active=“activeIndex”:因为添加了router属性,所以,可以通过导航的index定位导航,最终返回一个导航的path即可。
activeIndex() {
return this.$route.path
}
##step3:NavItem组件的代码为:
<template>
<!--1.//如果当前存在子节点-->
<el-submenu v-if="item.children && item.children.length" :index="navIndex"
:class="{avatar:item.title.length == 0 ? true:false }">
<template slot="title" v-if="item.title">{{item.title}}</template>
<template slot="title" v-else>
<el-avatar :size="52" shape="square" :src="item.img"></el-avatar>
</template>
<!--递归自身,直到再无子节点-->
<template v-for="(subItem, subIndex) in item.children">
<nav-item :key="navIndex+'-'+subIndex" :item="subItem" :nav-index="navIndex+'-'+subIndex"></nav-item>
</template>
</el-submenu>
<!--2.如果当前不存在子节点-->
<el-menu-item :index="item.path" v-else>{{item.title}}</el-menu-item>
</template>
释:NavItem组件一进来会先使用v-if判断当前数据是否存在子数据(即children),如果存在1代码,因为可能会存在三级或者四级导航,所以,使用了递归组件,判断是否存在多级导航,如果存在则递归,否则,退出执行2代码。
动态多级导航,核心的思路就是递归组件(如果你不使用递归组件,也可以自己判断,看你个人喜欢的),
最终我们调用Nav组件的时候,就可以渲染出入demo的例子了,效果图:
动态多级导航数据:
{
"code": "200",
"msg": "success",
"data": [
{
"title": "首页",
"path": "/home"
},
{
"title": "文章分类",
"children": [
{
"title": "JAVA",
"path": "/aCategory/java"
},
{
"title": "VUE.JS",
"path": "/aCategory/vue.js",
"children": [
{
"title": "VUEROUTER",
"path": "/aCategory/vue.js/vuerouter",
"children": [
{
"title": "vue-test",
"path": "/aCategory/vue.js/vuerouter/test"
}
]
}
]
},
{
"title": "JAVASCRIPT",
"path": "/aCategory/javascript"
},
{
"title": "HTML+CSS",
"path": "/aCategory/html_css"
}
]
},
{
"title": "关于",
"path": "/about"
},
{
"title": "留言",
"path": "/message"
},
{
"title":"",
"img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582976911553&di=0f3c1c8f5e08a5b2bbb2ea8b2b6488a5&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F317278a608ea285fd09a9ac0270324ba2ef64ee0229b-FRFK1i_fw658",
"children": [
{
"title": "基本信息",
"path": "/mine/baseInfo"
}
]
}
]
}