(ElementUI) container 布局容器

最新推荐文章于 2025-02-10 14:09:45 发布

Zella Zhang

最新推荐文章于 2025-02-10 14:09:45 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： ElementUI 文章标签： elmentui

本文链接：https://blog.youkuaiyun.com/FemaleHacker/article/details/119203935

ElementUI 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Element UI的布局容器组件，包括Container、Header、Aside、Main和Footer的用法，并通过逐步展示从基础到复杂的布局结构，如菜单和下拉菜单的集成，以及表格的使用，揭示了如何利用这些组件构建功能丰富的页面布局。同时，文章还强调了这些组件基于flex布局，需要关注浏览器的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- Container 布局容器

Container 布局容器

简述

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

主要简单分支结构

 - el-contanier
 	- el-aside
 	- el-container
 		- el-header
 		- el-main

1 初步效果图

在这里插入图片描述

1 初步效果图的代码

废话不多说先上代码

          <el-container  style="height: 500px; border: 1px solid #eee">
            <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
            </el-aside>
            <!-- 右侧 上方内容 -->
            <el-container>
              <el-header style='text-align:right;font-size:12px'>
              </el-header> 
              <!-- 右侧 主要 内容 -->
              <el-main style='background-color: rgb(228, 231, 246)'>
              </el-main>
            </el-container>
          </el-container>

2 分支结构

 - el-contanier
 	- el-aside
 		- el-menu
 			- el-submenu
 	- el-container
 		- el-header
 		- el-main

2 效果图

在这里插入图片描述

2 上效果图的代码

          <el-container  style="height: 500px; border: 1px solid #eee">
            <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1', '3']">
                <el-submenu index='1'>
                  <template slot="title"><i class="el-icon-message"></i>导航一</template>
                </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>
            <!-- 右侧 上方内容 -->
            <el-container>
              <el-header style='text-align:right;font-size:12px'>
              </el-header> 
              <!-- 右侧 主要 内容 -->
              <el-main style='background-color: rgb(228, 231, 246)'>
              </el-main>
            </el-container>
          </el-container>

3 最终分支结构

 - el-contanier
 	- el-aside
 		- el-menu
 			- el-submenu
 				-  template
 				- el-menu-item-group
 					-  template
 					- el-menu-item  
 	- el-container
 		- el-header
 			-  el-dropdown
 				- el-dropdown-menu
 					- el-dropdown-item
 		- el-main
 			- el-table
 				- el-table-column

3 最终效果图

在这里插入图片描述

3 最终效果图的代码

          <el-container  style="height: 500px; border: 1px solid #eee">
            <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1', '3']">
                <el-submenu index='1'>
                  <template slot="title"><i class="el-icon-message"></i>导航一</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="分组二">
                    <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'>选项4-1</el-menu-item>
                  </el-submenu>
                </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>
            <!-- 右侧 上方内容 -->
            <el-container>
              <el-header style='text-align:right;font-size:12px'>
                <el-dropdown>
                  <i class="el-icon-setting" style='margin-right:15px'></i>
                  <el-dropdown-menu slot='dropdown'>
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
              </el-header> 
              <!-- 右侧 主要 内容 -->
              <el-main style='background-color: rgb(228, 231, 246)'>
                <el-table :data="tableData">
                  <el-table-column prop='date' label='日期' width='140'></el-table-column>
                  <el-table-column prop='name' label='姓名' width='120'></el-table-column>
                  <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
              </el-main>
            </el-container>
          </el-container>