spfm-market-front/src/components/p-menu-item.vue

<template>
	<div>
		<template v-for="(menu, index) in menuData">
			<el-submenu :key="menu.index" :index="
          menu.rountPath == '' || menu.rountPath == '#'
            ? menu.name + index
            : menu.rountPath
        " v-if="menu.children" @click="handelRouterTo(menu)">
				<template slot="title">
					<i style="color: #409eff !important" class="el-icon-location"></i>
					<el-tooltip class="item" effect="dark" :content="menu.name" placement="right"
						v-if="menu.name.length > 9"><span>{{ menu.name }}</span>
					</el-tooltip>
					<span v-else>{{ menu.name }}</span>
				</template>
				<MenuTree :menuData="menu.children"></MenuTree>
			</el-submenu>
			<el-menu-item v-show="menu.systemflag != 1" @click="handelRouterTo(menu)"
				:index="menu.rountPath == '' ? menu.name : menu.rountPath" :key="menu.index" v-else>
				<el-tooltip class="item" effect="dark" :content="menu.name" placement="right"
					v-if="menu.name.length > 9"><span>{{ menu.name }}</span>
				</el-tooltip>
				<span v-else>{{ menu.name }}</span>
			</el-menu-item>
		</template>
	</div>
</template>

<script>
	export default {
		name: "MenuTree",
		props: ["menuData"],
		methods: {
			handleOpen(e) {
				if (e.indexOf("/") != -1) {
					if (this.$route.path != e) {
						this.$router.push(e);
					}
				}
			},
			handleClose() {},
			handelRouterTo(item) {
				if (item.systemflag == "1") {
					return;
				}
				for (let i = 0; i < this.$store.state.tabList.length; i++) {
					if (this.$store.state.tabList[i].rountPath === item.rountPath) {
						this.$store.state.tabList[i] = item;
					}
				}
				let set = new Set([...this.$store.state.tabList, item]);
				set.add(item);
				this.$store.commit("setDefaultActive", item.rountPath);
				this.$store.commit("setTabList", Array.from(set));
			},
		},
	};
</script>
<style>
	.el-submenu {
		border-bottom: 1px solid #ececec;
	}
	
	.is-opened .el-submenu__title {
		/* background-color: #ecf5ff !important; */
		background-color: #dddddd !important;
		border-left:3px solid #34A0CE;
	}
	.el-submenu__title:hover{
		background-color: #bbbbbb !important;
		border-left:3px solid #34A0CE;
	}
	.is-opened .el-submenu__title:hover{
		background-color: #bbbbbb !important;
		border-left:3px solid #34A0CE;
	}
	.el-submenu__title {
		/* background-color: #ecf5ff;
  border-radius: 30px;
  margin-bottom: 10px; */
	}

	.el-submenu.is-active .el-submenu__title {
		/* background-color: #ecf5ff; */
	}
</style>
<style lang="scss" scoped>
	.el-menu-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 50px;
		background: #2e7dcf;
		span {
			padding-right: 10px;
			color: #bdddff;
		}
		
	}

	.el-menu-item:hover{
		background: #577494;
	}

	.el-menu--vertical {
		.el-menu-item {
			width: auto !important;
			span {
				padding-right: 0;
			}
		}
	}

	.bgc {
		background-color: #f56c6c;
	}

	.bgcChild {
		background-color: #f56c6c;
	}
</style>