vue elementUI使用v-for创建三级导航栏

最新推荐文章于 2025-04-26 22:40:46 发布

yc99

最新推荐文章于 2025-04-26 22:40:46 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： vue 三级导航

本文链接：https://blog.youkuaiyun.com/gjsiaifa/article/details/90643285

elementUI 专栏收录该内容

5 篇文章

订阅专栏

博客围绕Vue和三级导航展开，虽无具体内容，但推测是关于使用Vue技术来实现三级导航功能，在前端开发中，Vue常用于构建用户界面，三级导航是常见的导航形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab">

				<!-- 一级菜单 -->
				<template v-for="item in slidebarData" >
					<el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
						<template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>

						<!-- 二级菜单 -->
						<template v-for="itemChild in item.subs">
							<el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
								<template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>

								<!-- 三级菜单 -->
								<el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
									<i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
								</el-menu-item>
							</el-submenu>

							<el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.title}}</span></el-menu-item>
						</template>
					</el-submenu>

					<el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span></el-menu-item>
				</template>

		</el-menu>```