Vue头部菜单,点击菜单新增tab页签
<template>
<div class="wrapper">
<!-- 页面头部部分 -->
<div class="header">
<div class="logo">SpringCloud-Study</div>
<!-- 水平一级菜单 -->
<div style="float:left;">
<el-menu mode="horizontal" class="el-menu-demo" @select="handleSelect" active-text-color="#ffd04b">
<template v-for="item in menus">
<el-menu-item v-if="item.children.length ===0" :key="item.menuUrl" :index="item.menuUrl">{{item.menuTitle}}</el-menu-item>
<el-submenu v-else-if="item.children.length >0" :key="item.menuUrl" :index="item.menuUrl">
<template slot="title">
<span>{{item.menuTitle}}</span>
</template>
<el-menu-item :index = "child.menuUrl" v-for="child in item.children" :key="child.menuUrl">
<span>{{child.menuTitle}}</span>
</el-menu-item>
</el-submenu>
</template>
</el-menu>
</div>
<div class="header-right">
<div class="header-user-con">
<!-- 用户头像 -->
<div class="user-avator"><img src="../../assets/img/img.jpg" /></div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ userName }}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item disabled>修改密码</el-dropdown-item>
<el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<el-main>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{item.content}}
</el-tab-pane>
</el-tabs>
</el-main>
</div>
</template>
<script>
import Cookies from "js-cookie";
export default {
data() {
return {
menus :[],
editableTabs: [{
title: '首页',
name: 'first_tab',
content: ''
}],
editableTabsValue:'first_tab',
}
},
computed: {
userName() {
let userName = Cookies.get("ydy-user");
return userName ;
}
},
methods:{
// 切换菜单栏
handleSelect(key, keyPath) {
console.log(key);
this.addTab(key);
},
// 用户名下拉菜单选择事件
handleCommand(command) {
if (command == 'loginOut') {
Cookies.remove('ydy-user');
Cookies.remove('ydy-token');
this.$router.push('/login');
}
},
//查询菜单
queryUserMenus(){
let req = {"userName":Cookies.get("ydy-user")};
this.$api.QueryUserMenus(req).then(res => {
this.menus = res.data.data;
}).catch(err => {
this.$commsgbox.alert(err);
});
},
addTab(targetName) {
let isAdd = true;
this.editableTabs.forEach(function(item,index){
if(item.name == targetName){
isAdd = false;
}
});
if(isAdd){
this.editableTabs.push({
title: targetName,
name: targetName,
content: targetName
});
}
this.editableTabsValue = targetName;
},
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
},
created() {
this.queryUserMenus();
},
}
</script>
<style scoped>
.wrapper {
width: 100%;
height: 100%;
background: #f0f0f0;
}
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
background-color: #FFFFFF;
}
.header .logo {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 29px;
width: 200px;
vertical-align: center;
}
/* --------------- 用户头像区域的样式 ---------------- */
.header-right {
float: right;
padding-right: 50px;
}
.header-user-con {
display: flex;
height: 70px;
align-items: center;
}
.user-avator {
margin-left: 20px;
}
.user-avator img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.user-name {
margin-left: 10px;
}
.el-dropdown-link {
cursor: pointer;
}
.el-dropdown-menu__item {
text-align: center;
}
/* --------------- 水平一级菜单栏的样式--------------------- */
.el-menu.el-menu--horizontal {
border-bottom: none !important;
float: left;
margin-left: 50px;
}
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #409eff;
color: #3989fa;
font-weight: 700;
}
.el-menu--horizontal > .el-menu-item {
font-size: 16px;
margin: 0 15px;
color: black;
}
/** **/
.el-main {
padding : 0 0 0 0 ;
}
</style>
查询菜单方法queryUserMenus返回的结果集格式为
{"code":200,"msg":null,"data":[{"menuId":"1","menuParentId":"0","menuTitle":"系统管理","menuSequence":"0","menuUrl":"/user/system","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[{"menuId":"2","menuParentId":"1","menuTitle":"用户管理","menuSequence":"1","menuUrl":"/user/user","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":null}]},{"menuId":"3","menuParentId":"0","menuTitle":"角色管理","menuSequence":"2","menuUrl":"/user/role","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[{"menuId":"4","menuParentId":"3","menuTitle":"权限管理","menuSequence":"3","menuUrl":"/user/persimossion","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":null}]},{"menuId":"5","menuParentId":"0","menuTitle":"菜单管理","menuSequence":"4","menuUrl":"/user/menu","menuCreateTime":"2021-03-23","menuUpdateTime":"2021-03-23","children":[]}]}