九 Vue学习 manager页面布局
1: 登录后系统页面如下:
对应代码:
<template>
<div class="manage_page fillcontain">
<el-row style="height: 100%;">
<el-col :span="4" style="min-height: 100%; background-color: #324057;">
<el-menu :default-active="defaultActive" style="min-height: 100%;" theme="dark" router>
<el-menu-item index="manage"><i class="el-icon-menu"></i>首页</el-menu-item>
<el-submenu index="2">
<template slot="title"><i class="el-icon-document"></i>数据管理</template>
<!--<el-menu-item index="userList">用户列表</el-menu-item>-->
<el-menu-item index="shopList">卷宗管理</el-menu-item>
<!--<el-menu-item index="foodList">食品列表</el-menu-item>-->
<!--<el-menu-item index="orderList">订单列表</el-menu-item>-->
<el-menu-item index="adminList">管理员列表</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-plus"></i>添加数据</template>
<el-menu-item index="addShop">创建用户</el-menu-item>
<!--<el-menu-item index="addGoods">添加商品</el-menu-item>-->
</el-submenu>
<!--<el-submenu index="4">-->
<!--<template slot="title"><i class="el-icon-star-on"></i>图表</template>-->
<!--<el-menu-item index="visitor">用户分布</el-menu-item>-->
<!--<!– <el-menu-item index="newMember">用户数据</el-menu-item> –>-->
<!--</el-submenu>-->
<!--<el-submenu index="5">-->
<!--<template slot="title"><i class="el-icon-edit"></i>编辑</template>-->
<!--<!– <el-menu-item index="uploadImg">上传图片</el-menu-item> –>-->
<!--<el-menu-item index="vueEdit">文本编辑</el-menu-item>-->
<!--</el-submenu>-->
<el-submenu index="6">
<template slot="title"><i class="el-icon-setting"></i>设置</template>
<el-menu-item index="adminSet">管理员设置</el-menu-item>
<!-- <el-menu-item index="sendMessage">发送通知</el-menu-item> -->
</el-submenu>
<el-submenu index="7">
<template slot="title"><i class="el-icon-warning"></i>说明</template>
<el-menu-item index="explain">说明</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
<el-col :span="20" style="height: 100%;overflow: auto;">
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-col>
</el-row>
</div>
</template> <script>
export default {
computed: {
defaultActive: function(){
return this.$route.path.replace('/', '');
}
},
}
</script> <style lang="less" scoped>
@import '../style/mixin';
.manage_page{ }
</style>
整体布局: 一行 (el-row)两列(el-col)
第一列: 就是左边的菜单页面;
第二列: 就是右边的主要显示区域;
el-menu :
default-active:当前激活菜单的 index;
router: 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
keep-alive:
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
比如 在“卷宗管理”和“管理员管理”来回点击切换的时候,如果有keep-alive,则不用每次都从后台请求数据,渲染页面,而是缓存起来,加速页面显示;
如果没有keep-alive,则每次都从后台重新拿数据,渲染页面,页面显示缓慢。
九 Vue学习 manager页面布局的更多相关文章
- 10 Vue 学习 shortList页面
1: shortList页面代码如下: <template> <div class="fillcontain"> <head-top></ ...
- 【Flutter学习】页面布局之其它布局处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之列表和表格处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- xamarin学习之页面布局
在android应中,需要注意3个文件,他们分别是:Main.axml,String.xml和Activity.cs. 1.布局文件Main.axml ,该文件保存在Resouses/layout的目 ...
- [Android学习笔记]页面布局
线性布局:LinearLayout 1.集成ViewGroup,故可容纳多个View 2.线性布局,可设置水平或者垂直方向 相对布局:RelativeLayout
- (数据科学学习手札103)Python+Dash快速web应用开发——页面布局篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
随机推荐
- error_logger 爆炸
具有讽刺意味的是,负责错误日志的进程竟然是最为脆弱的之一.在Erlang的缺省安装中,error_logger39负责记录日志(写入磁盘或者发送到网络上),它的速度要比错误产生的速度慢得多.尤其是在记 ...
- python 基础 5.1 python 构造器
一. 类的构造器 __init__ 构造函数,在生成对象时调用.由于类可以起到模板的作用,因此,可以在创建实例的时候,把一些我们认为必须绑定的属性强制填写进去.通过定义一个特殊的__init__方法, ...
- 【BZOJ4399】魔法少女LJJ 线段树合并
[BZOJ4399]魔法少女LJJ Description 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了LJJ感叹道“这里真是个迷人的 ...
- 【BZOJ4408】[Fjoi 2016]神秘数 主席树神题
[BZOJ4408][Fjoi 2016]神秘数 Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13},1 = 12 = 1 ...
- 九度OJ 1083:特殊乘法 (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4114 解决:2809 题目描述: 写个算法,对2个小于1000000000的输入,求结果. 特殊乘法举例:123 * 45 = 1*4 + ...
- going
- 我的Android进阶之旅------>Android资源文件string.xml中\u2026的意思
今天看了一个string.xml文件,对其中的一行代码中包含的\u2026不是很理解,后来查阅资料后发现了其中的意思. 代码如下: <resources xmlns:xliff="ur ...
- linux安装mongodb,设为全局和后台启动
curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.5.tgz # 下载 tar -zxvf mongodb-linux ...
- apace搭建站点
Listen 127.0.0.1:3310<VirtualHost *:3306> ServerName 127.0.0.1:3306 DocumentRoot "F:/Baid ...
- javascript类的简单定义
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...