大致实现以上效果
一、左侧自动加载菜单
NavMenu.vue 菜单组件，简单调整了一下菜单直接的距离，代码如下：
<template>
<div>
<template v-for="item in menus">
<!-- 3、有子菜单，设置不同的 key 和 index -->
<el-submenu v-if="item.hasOwnProperty('children') && item.children.length > 0" :key="'submenu' + item.id"
:index="item.id">
<!-- 4、更多菜单，设置不同样式 -->
<template v-if="item.id === 'menu_more'" slot="title">
<i class="el-icon-more"></i>
</template>
<!-- 5、title 上添加 @click -->
<template v-else slot="title">
<!-- <i class="el-icon-menu"></i> @click="handleClick(item)"-->
<i v-if="item.hasOwnProperty('icon') && item.icon!== ''" :class="item.icon"></i>
<span style="display: inline-block">
{{ item.text }}
</span>
</template>
<!-- 6、此处添加 el-menu-item 是为了 submenu 能够选中 -->
<el-menu-item v-show="false" :index="item.id" :key="item.id">
<span>{{ item.text }}</span>
</el-menu-item>
<!-- 7、如果有子级数据使用递归组件 v-on="$listeners"-->
<NavMenu :menus="item.children"></NavMenu>
</el-submenu>
<!-- 5、没有子菜单，添加 @click @click="handleClick(item)"-->
<el-menu-item v-else :index="item.id" :key="item.id" style="height: 40px;line-height: 40px;">
<!-- <i :class="item.icon"></i> -->
<span>{{ item.text }}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: "NavMenu",
props: {
menus: {
type: Array,
default: () => []
}
},
data() {
return {
iconList: {
"el-icon-s-tools": "el-icon-s-tools",
"el-icon-s-promotion": "el-icon-s-promotion",
"el-icon-s-platform": "el-icon-s-platform",
"el-icon-s-operation": "el-icon-s-operation",
}
}
},
created() {
console.log("NavMenu created");
console.log(this.menus);
},
methods: {
handleClick(item) {
console.log("NavMenu handleClick", item);
}
}
}
</script>
<style>
.el-menu-item-group__title {
/* 隐藏导航分组 */
display: none;
}
div .el-submenu__title {
/* 导航有子集节点 */
height: 45px;
line-height: 45px;
}
</style>
二、点击菜单，加载相应的选项卡
//根据点击的菜单，加载相应的选项卡
getNavMenu(navMenus, keyPath, index) {
if (!navMenus || index >= keyPath.length) {
return null;
}
for (var i = 0; i < navMenus.length; i++) {
if (navMenus[i].id === keyPath[index]) {
if (index === keyPath.length - 1) {
return navMenus[i];
} else {
return this.getNavMenu(navMenus[i].children, keyPath, index + 1);
}
}
}
return null;
},
handleSelect(key, keyPath) {
// 选中菜单
// this.openedsindex=keyPath[0];
var temps = [];
for (var i = 0; i < keyPath.length - 1; i++) {
temps.push(keyPath[i]);
}
this.openedsindex = temps;
// console.log("handleSelect", key, keyPath);
// console.log("temps", temps);
var elmenu = this.getNavMenu(this.navMenus, keyPath, 0);
// console.log("addTab", elmenu);
if (elmenu) {
this.addTab(elmenu);
}
},
// elmenuitemClick(e) {
// console.log(e.$el.dataset.name);
// },
addTab(param) {
var tabs = this.tabs;
if (tabs.length >= 10) {
this.$notify({
title: '消息提醒',
message: '已经打开了10个选项卡，请关闭一个选项卡后再打开新的选项卡。',
position: 'top-left',
type: 'warning',
duration: 3000,
});
return;
}
var tab = tabs.find(item => item.id === param.id);
// this.editableTabsValue=param.id;
if (tab) {
this.activeTab = param.id;
return;
}
else {
this.tabs.push(param);
this.activeTab = param.id;
}
},
removeTab(targetName) {
try {
// console.log(targetName);
let tabs = this.tabs;
if (tabs.length <= 1) {
return;
}
let activeName = this.activeTab;
// var text = "";
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.id === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.id;
// text = nextTab.text;
}
}
});
}
// console.log("removeTab", activeName, text);
this.tabs = tabs.filter(tab => tab.id !== targetName);
this.activeTab = activeName;
} catch (e) {
// console.log(e);
}
}