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

实现效果如下

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"
					}
				]
			}
		]
	}
]

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>