vite+vue+ts+element-plus从零开发管理后台框架(08)-顶部整体布局

顶部整体使用左、中、右的布局。左侧宽度跟菜单宽度一样，如果菜单未折叠就显示后台logo和后台名称，如果折叠了就只显示后台logo。右侧内容自适应，主要是显示系统工具按钮和用户信息。中间使用剩余空间，主要是显示菜单折叠按钮和多页签。

布局

编辑src/views/Main.vue，template段el-header修改如下。

<el-header>
    <div class="header-left">left</div>
    <div class="header-center">center</div>
    <div class="header-right">right</div>
</el-header>

style段el-header类修改如下

.el-header {
    padding: 0px;
    border-bottom: 1px solid var(--el-border-color);
    
    .header-left {
        background-color: red;
    }
    .header-center {
        background-color: green;
    }
    .header-right {
        background-color: blue;
    }
}

浏览器查看效果，发现依次从上到下布局了。

使用 flex 完成布局效果

编辑src/views/Main.vue，style段el-header类修改如下。

.el-header {
    padding: 0px;
    border-bottom: 1px solid var(--el-border-color);

    display: flex;
    align-items: center;
    
    .header-left {
        background-color: red;
        width: 300px;
    }
    .header-center {
        background-color: green;
        flex-grow: 1;
    }
    .header-right {
        background-color: blue;
    }
}

浏览器查看效果，实现了左侧固定宽度，右侧内容自适应，中间使用剩余空间。