Container布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>:底栏容器。

注意:<el-container>的子元素只能是后四者，后四者的父元素也只能是<el-container>。

常见的页面布局

<el-container><el-header>Header</el-header><el-main>Main</el-main>
</el-container><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer>
</el-container><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main>
</el-container><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container>
</el-container><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container>
</el-container><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container>
</el-container><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body > .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
</style>

效果如下图所示:

案例

<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="分组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">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></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><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><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
</style><script>export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}};
</script>

效果图如下所示:

Container Attributes

参数	说明	类型	可选值	默认值
direction	子元素额排列方向	string	horizontal/vertical	子元素中有el-header或者el-footer时为vertical，否则为horizontal

Header Attributes

参数	说明	类型	可选值	默认值
height	顶栏高度	string	——	60px

Aside Attributes

参数	说明	类型	可选值	默认值
width	侧边栏宽度	string	——	300px

Footer Attributes

参数	说明	类型	可选值	默认值
height	底栏高度	string	——	60px

Container布局容器相关推荐

ElementUI Container布局容器
ElementUI介绍常用组件 container布局容器
使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
Container 布局容器
Container 布局容器用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含 <el-header> 或 <el ...
使用element-ui中的container布局容器
使用container布局容器,最常用的是第六个(自己官网看第六个什么样) 可能有人调整aside的高,始终不能充满屏幕,接下来我说一下我通常用的 1.在App.vue中,style里写: #app ...
让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: <el-container><el-hea ...
Element的Container布局容器布满全屏
摘要:在使用Element(2.10.1版本)的Container布局容器布,发现按照官网的代码运行后,发现不能撑开整个页面,只能显示一段高度官方代码运行后效果: 如何实现不满全屏呢?实现如下: ...
element布局容器大小_让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: Header left Main 那如何让它高度百分百显示呢 ...
使ElementUI的Container布局容器布满全屏
问题:引用官网例子,布局只占一半,定义固定像素高度又不好适用不同屏幕大小效果. 解决方案: 1.在app.vue中加以下样式 <style>#app {position: absolute ...
ElementUI 布局容器Container
目录官方地址布局容器组件常见布局测试用的CSS样式常见布局1 常见布局2 常见布局3 常见布局3 常见布局4 常见布局5 常见布局6 实例 template style js el-cont ...

Container布局容器

Container布局容器

常见的页面布局

案例

Container Attributes

Header Attributes

Aside Attributes

Footer Attributes

Container布局容器相关推荐

最新文章

热门文章