使用ElementUI实现简单的后台管理首页布局

在使用ElementUI实现后台管理首页布局是比较常见的一个需求，下面潘老师就带大家来实现简单的后台管理布局。我这里使用的是vue-cli脚手架整合ElementUI来搭建的环境，如果你还不会整合请参考博文：

ElmentUI入门（1）——使用vue-cli集成ElementUI环境搭建步骤

一、初识ElmentUI 1、介绍 Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 […]

第1步：实现如图整体布局

1）首先我们在components文件夹中新建一个Home.vue组件，作为我们的后台管理首页组件，我们参考ElementUI官方文档中的Container布局容器，来实现该布局，此时Home.vue代码如下：

<template>
    <el-container>
        <!-- 头部高度设为50px（默认60px） -->
        <el-header height="50px">Header</el-header>
        <el-container>
            <!-- 菜单栏宽度设为230px -->
            <el-aside width="230px">Aside</el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
    /*占满全屏*/
    .el-container{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 0;
    }
    /*上外边距50px，防止挡住Header*/
    .el-aside,.el-main{
        margin-top: 50px;
    }
    /*设置背景色，方便观察效果*/
    .el-header{
        background-color: #0074D9;
    }
    .el-aside{
        background-color: #545c64;
    }
    .el-main{
        background-color: #eee;
    }
</style>

2）接着我们将Home.vue导入App.vue并注册使用，App.vue代码如下：

<template>
  <div id="app">
    <!-- 后期整合vue-router可以替换为router-view，根据路由去展示是首页还是登录、注册页 -->
    <Home></Home>
  </div>
</template>

<script>
    import Home from "./components/Home.vue"
    export default {
      methods: {
      },
      components:{
          Home
      }
    }
</script>

<style>
    /* 去除浏览器默认边距 */
    *{
        margin:0;
        padding: 0;
    }
</style>

3）查看效果如图：

第2步：实现自定义颜色及可折叠菜单

1）参考官方文档NavMenu 导航菜单中自定义颜色和可折叠菜单的代码，我们稍作修改将Home.vue中的el-aside内代码修改如下：

<!-- 菜单栏宽度设为自动 -->
<el-aside width="auto">
    <el-radio-group v-model="isCollapse">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
        default-active="2"
        class="el-menu-vertical" 
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse">
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
        </el-menu-item>
    </el-menu>
</el-aside>

2）将菜单的右侧边框宽度去除以及设置展开时菜单宽度，所以添加如下样式：

/* 去除菜单右侧边框 */
.el-menu{
  border-right: none;
}
/* 设置展开时菜单宽度 */
.el-menu-vertical:not(.el-menu--collapse) {
    width: 230px;
}

3）定义isCollapse属性，脚本如下：

<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        }
    }
</script>

4）此时效果如图：

第3步：实现头部效果并优化折叠菜单

头部我这里将其划分为3块，最左侧为logo区域，其右侧有一个可折叠菜单按钮（优化可折叠样式），最右侧可以放在一些头部菜单，我们这里最右侧只放置用户信息即可。
1）设置el-header的z-index为最上层，否则会被Main和Aside遮挡，因此在修改.el-header样式如下：

/*设置背景色，方便观察效果*/
.el-header{
    background-color: #0074D9;
    /* 上层显示，避免被Main和Aside遮挡 */
    z-index: 999;
}

2）删除Aside中el-radio-group展开收起组件，我们将其放到Header中，el-header整体代码如下：

<!-- 头部高度设为50px（默认60px） -->
<el-header height="50px">
    <!-- logo -->
    <a class="logo" href="/">商城管理系统</a>
    <!-- 折叠菜单按钮 -->
    <div class="toggle"  @click="isCollapse = !isCollapse">
        <i class="el-icon-s-unfold" v-if="isCollapse"></i>
        <i class="el-icon-s-fold" v-if="!isCollapse"></i>
    </div>
    <!-- 下拉菜单 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        <i class="el-icon-user el-icon--left"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
</el-header>

3）新增对应的样式如下：

/* logo */
.logo{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    padding: 0 15px;
    font-weight: 400;
    text-decoration: none;
}
/* 折叠按钮 */
.toggle{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    display: inline-block;
    padding: 0 15px;
    border-left: solid 1px #ccc;
    position: absolute;
    left:230px;
    cursor: pointer;
}
.toggle:hover{
    background-color: #ffd04b;
}
/* 下拉菜单 */
.el-dropdown{
    color: #fff;
    text-align: center;
    font-size: 26px;
    line-height: 50px;
    float: right;
}

4）测试样式如下：

第4步：Main主体说明

el-main组件中可以结合vue-router路由嵌套实现页面的跳转与显示，至此我们整个基于ElementUI的简单后台布局就完成了。

PS：以下附上Home.vue的完整代码：

<template>
    <el-container>
        <!-- 头部高度设为50px（默认60px） -->
        <el-header height="50px">
            <!-- logo -->
            <a class="logo" href="/">商城管理系统</a>
            <!-- 折叠菜单按钮 -->
            <div class="toggle"  @click="isCollapse = !isCollapse">
                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
                <i class="el-icon-s-fold" v-if="!isCollapse"></i>
            </div>
            <!-- 下拉菜单 -->
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-user el-icon--left"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <!-- 菜单栏宽度设为自动 -->
            <el-aside width="auto">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical" 
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 可以结合vue-router路由嵌套实现页面的跳转与显示 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>
 
<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        }
    }
</script>
 
<style scoped>
    /*占满全屏*/
    .el-container{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 0;
    }
    /*上外边距50px，防止挡住Header*/
    .el-aside,.el-main{
        margin-top: 50px;
    }
    /*设置背景色，方便观察效果*/
    .el-header{
        background-color: #0074D9;
        /* 上层显示，避免被Main和Aside遮挡 */
        z-index: 999;
    }
    .el-aside{
        background-color: #545c64;
    }
    .el-main{
        background-color: #eee;
    }
    /* 去除菜单右侧边框 */
    .el-menu{
      border-right: none;
    }
    /* 设置展开时菜单宽度 */
    .el-menu-vertical:not(.el-menu--collapse) {
        width: 230px;
    }
    /* logo */
    .logo{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        padding: 0 15px;
        font-weight: 400;
        text-decoration: none;
    }
    /* 折叠按钮 */
    .toggle{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        display: inline-block;
        padding: 0 15px;
        border-left: solid 1px #ccc;
        position: absolute;
        left:230px;
        cursor: pointer;
    }
    .toggle:hover{
        background-color: #ffd04b;
    }
    /* 下拉菜单 */
    .el-dropdown{
        color: #fff;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
        float: right;
    }
</style>