Hacer un sistema de gestión de fondo, muchas veces esto no va a estar muerto en la estructura de datos de sólo una o dos historias, a menudo, no sabemos cuántas capas de datos, lo que necesitamos para la prestación de forma recursiva, y luego reaccionan recursividad menú es más conveniente escribir las funciones recursivas con la costumbre de la misma, mientras que en vue, necesitamos unos componentes recursivas, a continuación, vue en preguntar lo que hace, de hecho, se basan en componentes de nombre de atributo, el valor del nombre de un componente recursiva es la corriente propio componente, por ejemplo,
<template>
<div>
<hello />
</div>
</template>
<script>
export default {
name: 'hello'
}
</script>
<style lang="scss" scoped>
</style>Con esto en mente, sabemos cómo jugar un menú recursiva,
Como para no escribir una función recursiva de un socio pequeño, usted necesita aprender a sí mismo, o de lo contrario es fácil escribir un bucle infinito, y luego reportado a la consola de un error de desbordamiento de pila de llamadas
En el siguiente ejemplo el elementui sub-menú directamente en los datos analógicos, y no se explican
App.vue
<template>
<el-col :span="4">
<el-menu default-active="2">
<SecondMenu v-for="item in list" :key="item.id" :item="item" />
</el-menu>
</el-col>
</template>
<script>
import SecondMenu from './SecondMenu'
export default {
data() {
return {
list: [
{
id: '1',
title: '导航一',
children: [
{
id: '1-1',
title: '选项1',
children: [
{
id: '1-1-1',
title: '选项1-1-1'
}
]
},
{
id: '1-2',
title: '选项2'
}
]
},
{
id: '2',
title: '导航二',
children: [
{
id: '2-1',
title: '选项2-1'
},
{
id: '2-2',
title: '选项2-2'
}
]
},
{
id: '3',
title: '导航三'
}
]
}
},
components: {
SecondMenu
}
}
</script>SecondMenu.vue
<template>
<div>
<el-submenu :key="item.id" :index="item.id" v-if="item.children">
<template slot="title">
<i class="el-icon-location"></i>
<span>{{ item.title }}</span>
</template>
<SecondMenu
v-for="child in item.children"
:key="child.path"
:item="child"
class="nest-menu"
/>
</el-submenu>
<el-menu-item :index="item.id" v-else>
<i class="el-icon-setting"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</div>
</template>
<script>
export default {
name: 'SecondMenu',
components: {},
props: {
item: {
type: Object,
default: () => {}
}
}
}
</script>
<style lang="scss" scoped></style>A continuación se muestra el menú de ruta, (acaba de decir aquí que la ruta determinada delantera, en lugar de tomar la ruta desde el fondo, incluso si la configuración de privilegios, casi)
