菜单无限层级渲染

前言

任意菜单无限层级渲染到页面

一、新建组件item

<template>
	<div>
		<template v-for="(item,index) in menus"  >
			<div  v-if="item.child&& item.child.length" :kye="item.id">	
				<div>{{item.name}}</div>
				<div style="margin-left: 10px;">
					<item :menus="item.child" />
				</div>
				
			</div>
			<div style="margin-left: 10px;" v-else :kye="item.id"> 
				<div>{{item.name}}</div>
			</div>
		</template>
		
	</div>
</template>

<script>
	export default {
		name: 'item',
		props:{
			menus:{
				type:Array
			}
		}
	}
</script>

二、app.vue

<template>
	<div id="app">
		<item :menus="menu"/>
	</div>
</template>

<script>
	import item from './components/item.vue'

	export default {
		name: 'App',
		components: {
			item
		},
		data(){
			return{
				menu:[
					{
						id:1,
						name:'一级目录1',
						child:[
							{
								id:11,
								name:'二级目录1.1',
								child:[
									{
										id:111,
										name:'三级类目1.1.1'
									},
									{
										id:112,
										name:'三级目录1.1.2',
										child:[
											{
												id:1121,
												name:'四级目录1.1.2.1'
											},
											{
												id:1122,
												name:'四级目录1.1.2.2',
												child:[
													{
														id:11221,
														name:'五级目录1.1.2.2.1',
													}
												]
											},
										]
									}
								]
							},
							{
								id:12,
								name:'二级目录1.2'
							}
						]
					},
					{
						id:2,
						name:'一级目录2',
						child:[
							{
								id:21,
								name:'二级目录2.1'
							}
						]
					}
				]
			}
		},
	}
</script>

页面展示效果