续上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 /srcexport 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>

效果：

 注意事项：

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