看了一天把 菜单 和 tab 标签放在了一起 联动效果还可以
效果建议再调一下,没太注意颜色样式的搭配
难搞哦
<template>
<el-row class="container">
<el-col :span="24" class="header">
<el-col
:span="10"
class="logo"
:class="collapsed?'logo-collapse-width':'logo-width'"
>{
{collapsed?'':sysName}}</el-col>
<el-col :span="10">
<div class="tools" @click.prevent="collapse">
<i class="fa fa-align-justify"></i>
</div>
</el-col>
<el-col :span="4" class="userinfo">
<el-dropdown trigger="hover">
<span class="el-dropdown-link userinfo-inner">
<img :src="this.sysUserAvatar" />
{
{sysUserName}}
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-col>
<el-col :span="24" class="main">
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!--导航菜单-->
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
@open="handleopen"
@close="handleclose"
@select="handleselect"
unique-opened
router
v-show="!collapsed"
>
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title">
<i :class="item.iconCls"></i>
{
{item.name}}
</template>
<el-menu-item
v-for="child in item.children"
:in