当前位置:   article > 正文

基于vue+elementUI实现的三级菜单_vue手写三级菜单

vue手写三级菜单

实现效果如下

在这里插入图片描述

list数据

list: [
	{  item
		"icon": "el-icon-s-order",
		"name": "订单管理",
		"path": "/orderManage"
		"childrenMenu": [  itemChild
			{
				"icon": "el-icon-waller",
				"name": "充值卡",
				"path": "/orderManage/rechargeCard",
				"children": [  itemChild_child
					{
						"name": "充值卡管理",
						"path": "/orderManage/rechargeCard/rechargeCardManage"
					},
					{
						"name": "充值记录",
						"path": "/orderMange/rechargeCard/rechargeRecord"
					},
					{
						"name": "消费记录",
						"path": "/orderManage/rechargeCard/payRecord"
					}
				]
			}
		]
	}
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

adide.vue

<el-menu
  default-active="/orderManage/rechargeCard/rechargeCardManage"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  
  <!--一级菜单-->
  <template v-for="item in list">
	<el-submenu v-if="item.childrenMenu && item.childrenMenu.length" :index="item.path" :key="item.path">
		<template slot="title">
			<i :class="item.icon"></i>
			<span>{{item.name}}</span>
		</template>
		
		<!--二级菜单-->
		<template v-for="itemChild in item.childrenMenu">
			<el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">
				<template slot="title">
					<i :class="itemChild.icon"></i>
					<span>{{itemChild.name}}</span>
				</template>
				
				<!--三级菜单-->
				<el-menu-item v-for="itemChild_child in itemChild.children" :index="itemChild_child.path" :key="itemChild_child.path">
					<span slot="title">{{itemChild_child.name}}</span>
				</el-menu-item>
				
			</el-submenu>
			<el-menu-item v-else :index="itemChild.path" :key="itemChild.path">{{itemChild.name}}</el-menu-item>
			
		</template>
		
	</el-submenu>
	<el-menu-item v-else :index="item.path" :key="item.path">
		<i :class="item.icon"></i>
		<span slot="title">{{item.name}}</span>
	</el-menu-item>
  </template>
  
</el-menu>  
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号