动态生成的思路
1.通过对标签的循环遍历生成导航栏
2.通过导航栏自身的递归调用形成
1.循环遍历生成的方法
- 先判断是否有对应的二级菜单再进行对应的循环
<el-menu class="first-navigation"
:default-active="this.$route.path"
router
mode="horizontal"
@select="handleSelect" >
<el-submenu v-for="item in nav" :key="item.menuName" v-if="item.children" :index="item.code">
<template slot="title">{
{ item.menuName }}</template>
<el-menu-item
v-for="children in item.children" :
key="children.menuName"
:index="children.code"
>{
{ children.menuName }}</el-menu-item>
</el-submenu>
<el-menu-item v-for="item in nav" :key="item.menuName" v-if="!item.children" :index="item.code">
{
{ item.menuName }}</el-menu-item>
</el-menu>
缺点：无法实现多级导航,无法进行一级菜单间的排序
这是最最最简单的二级菜单实现方法所以适用范围也少
- 用一个div或template标签包含在外层进行循环，里面用v-if判断是否含有children并执行对应标签
<el-menu class="first-navigation"
:default-active="this.$route.path" r
outer
mode="horizontal"
@select="handleSelect" >
<div class="navigation-title" v-for="item in nav" :key="item.menuName">
<el-submenu v-if="item.children" :index="item.code">
<template slot="title">{
{ item.menuName }}</template>
<el-menu-item
v-for="children in item.children" :
key="children.menuName"
:index="children.code"
>{
{ children.menuName }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.code">{
{ item.menuName }}</el-menu-item>
</div>
</el-menu>
缺点：无法实现多级导航栏（或者说会使代码冗杂不确定性高）
适用于层级较少简单的导航栏
2.通过递归的方式生成导航栏（重头戏！！）
要实现一个动态灵活的导航栏就必须导航栏本身的排序，层级都是可控可调的所以上面的导航栏的实现仍然不够灵活与动态
- 递归生成也非常简单！！
核心：二次封装导航栏
先对el-menu里面进行编写
<template>
<div v-if="item.children">
<template v-if="item.children.length == 0">
<el-menu-item :index="item.path">
{
{item.title}}
</el-menu-item>
</template>
<el-submenu v-else :index="item.path">
<template slot="title" >
{
{item.title}}
</template>
<template v-for="child in item.children">
<navigation-item v-if="child.children&&child.children.length>0"
:item="child"
:key="child.path"/>
<el-menu-item v-else :key="child.path" :index="child.path">
{
{child.title}}
</el-menu-item>
</template>
</el-submenu>
</div>
</template>
<script>
export default {
name: 'navigationItem',
props: {
item: {
type: Object,
required: true
}
}
}
</script>
对el-menu进行封装
使用的时候调用这个组件
<template>
<div class="first-navigation">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
router
mode="horizontal"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF">
<navigation-item v-for="menu in menuList" :key="menu.path" :item="menu" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import navigationItem from './navigationItem
export default {
name:'navigation',
components: { navigationItem},
props:{
menuList: {
type: Array,
required: true
}
}
}
</script>
</script>
调用的时候
<template>
<navigation :menuList="navList"/>
</template>
<script>
import navigation from './navigation.vue'
export default {
name: 'app',
components: { navigation},
data() {
return {
navList:"",
}
}
}
</script>
文章末尾福利
element-ui的隐藏控件—el-scrollbar 对滚动条样式的修改
你是否还在纠结于滚动条样式太过于丑陋，局部的修改又不是很方便，当文本超出范围的时候加一句”overflow:scroll;“ 但看到那又宽又古老的样式实在不忍吐槽。
现在只需要在需要的的地方加上一句话就好啦
在使用时要设置外层容器高度并且要设置el-scrollbar 的高度为100%
例如：
<el-scrollbar style="height:100%">
至于滚动条更深入的使用大家可以自行百度o(*≧▽≦)ツ ~ ┴┴