后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密、退出菜单。中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局。其中导航菜单可以用el-menu配合el-menu-item来实现。用v-if控制一个变量值的变化,来控制在操作区域显示哪个组件。
具体代码如下
<template>
<div>
<el-container>
<el-header>
<el-row class="bg-dark">
<el-col :span="12">
<h2 style="margin: 0.9rem 0.5rem;">标题</h2>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-dropdown style="margin: 0.6rem;">
<el-button type="primary" plain>
<span class="fa fa-user-o"></span> <i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-b-modal.modal-2>修改密码</el-dropdown-item> <!--点击后显示修改密码的modal弹窗-->
<el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<el-container>
<el-aside width="200px" style="text-align: left;">
<el-menu default-active="1" class="el-menu-vertical-demo" theme="light" :default-openeds="openeds">
<!--首页导航,同时为变量curCom赋值-->