Dynamically generated ideas
1. Generate the navigation bar
by traversing the label 2. Form the recursive call of the navigation bar itself
1. Method of loop traversal generation
- First judge whether there is a corresponding secondary menu and then perform the corresponding cycle
<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>
Disadvantages: unable to achieve multi-level navigation, unable to sort between first-level menus
This is the easiest way to implement the secondary menu, so the scope of application is also small
- Use a div or template tag to include it in the outer layer to loop, and use v-if to determine whether it contains children and execute the corresponding tag
<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>
Disadvantages: unable to achieve multi-level navigation bar (or it will make the code redundant and uncertain)
Suitable for navigation bar with less hierarchy
2. Generate the navigation bar by recursive method (the highlight!!!)
To achieve a dynamic and flexible navigation bar, the navigation bar itself must be sorted, and the levels are all controllable and adjustable, so the implementation of the navigation bar above is still not flexible and dynamic enough
- Recursive generation is also very simple! !
Core: secondary packaging navigation bar
First write in 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>
Encapsulate el-menu
Call this component when you use it
<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>
When calling
<template>
<navigation :menuList="navList"/>
</template>
<script>
import navigation from './navigation.vue'
export default {
name: 'app',
components: { navigation},
data() {
return {
navList:"",
}
}
}
</script>
Welfare at the end of the article
Element-ui's hidden control—el-scrollbar to modify the scroll bar style
Are you still entangled in the scroll bar style is too ugly, partial modification is not very convenient, when the text is out of range, add a sentence " overflow: scroll; " But seeing that wide and old style really can’t bear to complain.
Now you only need to add a sentence where you need it.
When using it, you need to set the height of the outer container and set the height of the el-scrollbar to 100%.
For example:
<el-scrollbar style="height:100%">
As for the deeper use of the scroll bar, you can Baidu by yourself o(*≧▽≦)ツ~ ┴┴