后台管理系统——02首页布局

续上01，接下来实现layout.vue的基本布局

layout.vue

<template><div class="home"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container></div>
</template><script>
// @ is an alias to /src
export default {name: 'layout',
}
</script>
<style>.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;position: absolute;top: 60px;bottom: 0;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;position: absolute;top: 60px;left: 200px;right: 0;bottom: 0;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
</style>

效果：

测试一下是否可以分开滚动

制作header的导航栏

这里用到了bootstrap4中的mr-auto

<template><div class="home"><el-container><el-header><div class="flex mr-auto "><h2 class="tit">WEB ADMIN</h2><i class="el-icon-s-fold" @click="menucollapse"></i></div><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></el-header></div>
</template><script>
export default {name: "layout",data() {return {activeIndex: "1",activeIndex2: "1",};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},
};
</script>
<style>
.el-header {background-color: #545c64;color: #333;text-align: center;line-height: 60px;display: flex;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;/*     position: absolute;top: 60px;bottom: 0; */
}.el-main {background-color: #e9eef3;color: #333;/* padding: 0 20px; */text-align: center;/*     position: absolute;top: 60px;left: 200px;right: 0;bottom: 0; */
}
.flex {display: flex;align-items: center;color: #fff;cursor: pointer;
}
</style>

添加图片：

          <el-submenu index="2"><template slot="title"><el-avatarsize="small"src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>admin</template><el-menu-item index="2-1">设置</el-menu-item><el-menu-item index="2-2">退出</el-menu-item></el-submenu>

把数据结构中的数据放入对应的位置上

数据结构：

 navBar: {active: "0",list: [{name: "首页",subActive: "0",submenu: [{icon: "el-icon-s-home",name: "后台首页",pathname: "index",},{icon: "el-icon-s-claim",name: "商品列表",pathname: "shop_goods_list",},],},{name: "商品",subActive: "0",submenu: [{icon: "el-icon-s-claim",name: "商品列表",pathname: "shop_goods_list",},],},{name: "订单",},{name: "会员",},{name: "设置",},],},

遍历数据结构，取出中间的name

<el-menu-item index="1" v-for="(item, index) in navBar.list" :key="index">{{item.name}}</el-menu-item>

 <el-menu:default-active="navBar.active"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b">

完整布局代码：

<template><div class="home"><el-container><el-header><div class="flex mr-auto"><h2 class="tit">WEB ADMIN</h2><!-- 这里设置一个点击事件用来切换侧边栏的效果 --><i class="el-icon-s-operation" @click="menucollapse"></i></div><el-menu:default-active="navBar.active"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item:index="index | numToString"v-for="(item, index) in navBar.list":key="index">{{ item.name }}</el-menu-item><el-submenu index="100"><template slot="title"><el-avatarsize="small"src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>admin</template><el-menu-item index="2-1">设置</el-menu-item><el-menu-item index="2-2">退出</el-menu-item></el-submenu></el-menu></el-header><el-container style="height: 100%"><!-- 获取他的动态高度，如果开启了collapse收起，那么就缩小成64px，展开就放大200px --><!-- :width="collapse ? '64px' : '200px'" style="height: 100%" --><el-aside width="auto"><!-- default-active:gg当前激活菜单的 index --><el-menu:default-active="slideMenuActive":collapse="collapse"class="el-menu-vertical-demo"active-text-color="#008080"@select="submenuSelect"><el-menu-item:index="i | numToString"v-for="(item2, i) in submenus":key="i"><i :class="item2.icon"></i><span slot="title">{{ item2.name }}</span></el-menu-item></el-menu></el-aside><el-main><p v-for="j in 100" :key="j">{{ j }}</p></el-main></el-container></el-container></div>
</template><script>
// 混入
import common from "@/common/mixins/common.js";
export default {name: "layout",mixins: [common],data() {return {collapse: false,navBar: {active: "0",list: [{name: "首页",subActive: "0",submenu: [{icon: "el-icon-s-home",name: "后台首页",pathname: "index",},{icon: "el-icon-s-claim",name: "商品列表",pathname: "shop_goods_list",},],},{name: "商品",subActive: "0",submenu: [{icon: "el-icon-s-claim",name: "商品列表",pathname: "shop_goods_list",},],},{name: "订单",},{name: "会员",},{name: "设置",},],},};},methods: {// 点击图标进行切换menucollapse() {this.collapse = !this.collapse;},// 头部索引切换handleSelect(key, keyPath) {// 把获取到的索引给到active进行绑定this.navBar.active = key;console.log(this.navBar.active);this.slideMenuActive = "0";console.log(this.slideMenuActive);},// 侧边栏导航切换submenuSelect(key, keyPath) {console.log(key, keyPath);this.slideMenuActive = key;},},computed: {submenus() {// 每次点击的list列表项 例如点击首页：// [ { "icon": "el-icon-s-claim", "name": "商品列表", "pathname": "shop_goods_list" } ]return this.navBar.list[this.navBar.active].submenu || [];},slideMenuActive: {get() {return this.navBar.list[this.navBar.active].subActive || "0";},set(val) {this.navBar.list[this.navBar.active].subActive = val;},},},
};
</script>
<style>
.home{height: 100%;
}
.el-container{height: 100%;overflow: hidden;
}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}
.el-header {background-color: #545c64;color: #333;text-align: center;line-height: 60px;display: flex;
}.el-aside {background-color: #d3dce6;color: #333;text-align: center;/*   position: absolute;top: 60px;bottom: 0; */
}.el-main {background-color: #e9eef3;color: #333;padding: 0 20px;text-align: center;/*   position: absolute;top: 60px;left: 200px;right: 0;bottom: 0; */
}
.flex {display: flex;align-items: center;color: #fff;cursor: pointer;
}
.tit {font-size: 24px;line-height: 60px;margin-right: 40px;
}
.el-menu{height: 100%;
}
</style>

效果：

注意事项：

参数	说明	类型	可选值	默认值
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false

事件名称	说明	回调参数
select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

| 在vue里是一个管道符号，前面为你要过滤的值，后面是过滤器，所谓过滤就是你筛选后的值

后台管理系统——02首页布局相关推荐

elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现
目录:导读项目搭建 + ⾸⻚布局实现一.项目搭建 1.环境搭建 2.项目初期搭建二.Main.vue 三.左侧栏部分(CommonAside.vue) 四.header部分(CommonHead ...
web-前端之后台管理系统模板首页
这个是自己参照模板写出来的后台管理系统模板,只是一个前端框架其中包含很多个界面,后面会陆续发出来,请往下看...... ![这是首页的制作](https://img-blog.csdn.net/20 ...
Element 后台管理系统实用表格布局
此篇本章提供 Element 在后台管理系统中开发的一点归纳总结,欢迎大家复制粘贴及吐槽! <template><div><div class="app-con ...
【Vue】后台管理系统
O 项目说明 1.脚手架 vite vue-cli ==> webpack 2.vite脚手架使用官网:https://vitejs.cn/ Vue3 vite官网:https://cn.vi ...
企业办公oa系统医药OA办公后台管理会议管理用户管理物料管理活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权限管理
作品介绍:企业办公oa系统&医药OA办公后台管理&会议管理&用户管理&物料管理&活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权 ...
企业办公oa系统、医药OA办公后台管理、会议管理、用户管理、物料管理、活动管理、日常拜访、Axure医药内部管理平台、web端后台管理系统原型、医药OA系统、权限管理、Axure原型、rp原型
企业办公oa系统.医药OA办公后台管理.会议管理.用户管理.物料管理.活动管理.Axure医药内部管理平台.web端后台管理系统原型.医药OA系统.权限管理 Axure原型演示及下载地址:https: ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...

后台管理系统——02首页布局

后台管理系统——02首页布局相关推荐

最新文章

热门文章