(ElementUI) container 布局容器

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

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

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值