Ideas generadas dinámicamente
1. Genere la barra de navegación atravesando la etiqueta
2. Forme la llamada recursiva de la propia barra de navegación
1. Método de generación de recorrido de bucle
- Primero juzgue si hay un menú secundario correspondiente y luego realice el ciclo correspondiente
<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>
Desventajas: incapaz de lograr la navegación de varios niveles, incapaz de ordenar entre menús de primer nivel
Esta es la forma más fácil de implementar el menú secundario, por lo que el ámbito de aplicación también es pequeño
- Use una etiqueta div o plantilla para incluirla en la capa exterior para hacer un bucle, y use v-if para determinar si contiene elementos secundarios y ejecutar la etiqueta correspondiente
<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>
Desventajas: no se puede lograr la barra de navegación de varios niveles (o hará que el código sea redundante e incierto)
Adecuado para barra de navegación con menos jerarquía
2. Genere la barra de navegación por método recursivo (¡¡¡el resaltado !!!)
Para lograr una barra de navegación dinámica y flexible, la barra de navegación en sí debe estar ordenada, y los niveles son todos controlables y ajustables, por lo que la implementación de la barra de navegación anterior aún no es lo suficientemente flexible y dinámica.
- ¡La generación recursiva también es muy simple! !
Núcleo: barra de navegación de embalaje secundario
Primero escribe en 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>
Encapsular el-menú
Llame a este componente cuando lo use
<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>
Al llamar
<template>
<navigation :menuList="navList"/>
</template>
<script>
import navigation from './navigation.vue'
export default {
name: 'app',
components: { navigation},
data() {
return {
navList:"",
}
}
}
</script>
Bienestar al final del artículo.
Control oculto de element-ui: el-scrollbar para modificar el estilo de la barra de desplazamiento
¿Todavía estás enredado en la barra de desplazamiento? El estilo es demasiado feo, la modificación parcial no es muy conveniente, cuando el texto está fuera de rango, agrega una oración " overflow: scroll " ; pero viendo ese estilo amplio y antiguo realmente no puedo soportar quejarme.
Ahora solo necesita agregar una oración donde la necesite.
Al usarla, debe establecer la altura del contenedor exterior y establecer la altura de la barra de desplazamiento el al 100%.
Por ejemplo:
<el-scrollbar style="height:100%">
En cuanto al uso más profundo de la barra de desplazamiento, puedes Baidu solo o (* ≧ ▽ ≦) ツ ~ ┴┴