element 动态页签

动态页签

上代码

首先是自定义的菜单组件

<template>
	<div class="menu">
		<el-menu style="border: #545c64;" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff"
		 active-text-color="#ffd04b">
			<template v-for="item in menuList">
				<template v-if="item.parent === 'root'">
					<el-submenu v-if="item.hasChildern" :index="item.name">
						<template slot="title">{
   {
   item.title}}</template>
						<MenuItem v-for="items in menuList" v-if="item.name === items.parent" :parent="items.name" :hasChildern="items.hasChildern"
						 :name="items.name" :title="items.title" :menuList="menuList" />
					</el-submenu>
					<el-menu-item v-else :index="item.name">{
   {
   item.title}}</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import MenuItem from "@/components/MenuItem.vue";
	export default