Element el-container 布局容器组件详解

谁借莪１个温暖的怀抱￠ 2022-11-19 07:51 259阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 全局样式
 *  3. 布局代码
 *  4. 增加导航菜单
 *  5. 小结

# 1. 背景 #

由于一般的网页布局，也就是分个侧边导航栏，顶部标题栏，中间内容区域，以及底部版权信心栏。

element为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。

# 2. 全局样式 #

为了让网页的布局占满屏幕，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。

# 3. 布局代码 #

通过如下几个标签设置布局即可：

*  `<el-container>`：外层容器。当子元素中包含`<el-header>`或`<el-footer>`时，内部子元素会垂直排列。针对其他元素，则会水平排列。
 *  `<el-header>`：顶部栏容器。
 *  `<el-aside>`：侧边栏容器。
 *  `<el-main>`：内容区域容器。
 *  `<el-footer>`：底部栏容器。

我们开发一个页面如下：

<template>
      <el-container>
        <el-aside style="width:180px;">
        </el-aside>
        <el-container>
          <el-header>XX管理系统</el-header>
          <el-main>内容区域</el-main>
          <el-footer>版权所有</el-footer>
        </el-container>
      </el-container>
    </template>

为了便于区分各个区域，我们设置样式如下：

此时效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 4. 增加导航菜单 #

左侧内容区域可以添加导航菜单，由于导航菜单不是本节讲解内容，所以只是给出示例：

<el-aside style="width:180px;">
          <el-menu>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>导航一</template>
              <el-menu-item index="1-1">菜单1</el-menu-item>
              <el-menu-item index="1-2">菜单2</el-menu-item>
              <el-menu-item index="1-3">菜单3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            </el-submenu>
          </el-menu>
        </el-aside>

此时效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]

# 5. 小结 #

element封装的布局容器足够简单了，说实话感觉没法更简单了。

如果在使用element时，建议直接采用官方提供的布局容器组件，这样兼容性和稳定性会比较好。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/ce6cb95224ea41ed98f960b6ebb2a3fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/89f30611fd9c42c7969b27b2f9b0b21f.png