vue+elementui实现导航栏三级菜单动态显示

<template>
	<el-container>
		<el-header>Header</el-header>
		<el-container>
			<el-aside width="200px">
				<el-col :span="24">
					<el-menu :router="true"
					 class="el-menu-vertical-demo"
					 @open="handleOpen"
					 @close="handleClose"
					 :default-active="this.$router.path"
					 >

						<!--一级菜单-->
						<template v-for="item in menus">
							<el-submenu v-if="item.subMenu && item.subMenu.length" :index="item.url" :key="item.url">
								<template slot="title">
									<span>{{item.menuname}}</span>
								</template>

								<!--二级菜单-->
								<template v-for="itemChild in item.subMenu">
									<el-submenu v-if="itemChild.subMenu && itemChild.subMenu.length" :index="itemChild.url" :key="itemChild.url">
										<template slot="title">

											<span>{{itemChild.menuname}}</span>
										</template>

										<!--三级菜单-->
										<el-menu-item v-for="itemChild_child in itemChild.subMenu" :index="itemChild_child.url" :key="itemChild_child.url">
											<template slot="title">

												<span>{{itemChild_child.menuname}}</span>
											</template>
										</el-menu-item>

									</el-submenu>
									

								</template>

							</el-submenu>
						
						</template>

					</el-menu>



				</el-col>





			</el-aside>
			<el-main>
				<!-- 切换不同的组件，显示对应的内容 -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	//导出
	export default {

		data() {
			return {
				menus: [],
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},

			queryMenus() {
				this.$axios.get("myMenu/initMenu/")
					.then(respData => {
						this.menus = respData.data;
					})
					.catch(errorData => {
						console.log(errorData);
					})
			},

		},
		mounted() {
			this.queryMenus();
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	html,
	body,
	#mydiv {
		margin: 0px;
		padding: 0px;
		height: 100%;
	}

	.el-container {
		height: 100%;
	}
</style>