Do a background management system, many times this is not going to be dead in the data structure of only one or two stories, often, we do not know how many layers of data, which we need to recursively rendering, and then we react recursion menu is more convenient to write recursive functions with the usual about the same, while in vue, we need a recursive components, then vue in to ask what does, in fact, rely on name attribute components, the value of the name of a recursive component is the current component itself, for example,
<template>
<div>
<hello />
</div>
</template>
<script>
export default {
name: 'hello'
}
</script>
<style lang="scss" scoped>
</style>With that in mind, we know how to play a recursive menu,
As for not writing a recursive function of a small partner, you need to learn yourself, or else it is easy to write an infinite loop, and then reported to the console of a call stack overflow error
In the following example the sub-menu elementui directly on the analog data, and not explained
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>Below is the route menu, (just say here that the front-determined route, rather than take the route from the background, even if the configuration of privileges, almost)
