Container 布局容器

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

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

<el-header>:顶栏容器。

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

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

<el-footer>:底栏容器。

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

常见页面布局

常见页面布局1.png
常见页面布局2.png
常见页面布局3.png
常见页面布局4.png
常见页面布局5.png
常见页面布局6.png
常见页面布局7.png

  1. <el-container>
  2. <el-header>Header</el-header>
  3. <el-main>Main</el-main>
  4. </el-container>
  5. <el-container>
  6. <el-header>Header</el-header>
  7. <el-main>Main</el-main>
  8. <el-footer>Footer</el-footer>
  9. </el-container>
  10. <el-container>
  11. <el-aside width="200px">Aside</el-aside>
  12. <el-main>Main</el-main>
  13. </el-container>
  14. <el-container>
  15. <el-header>Header</el-header>
  16. <el-container>
  17. <el-aside width="200px">Aside</el-aside>
  18. <el-main>Main</el-main>
  19. </el-container>
  20. </el-container>
  21. <el-container>
  22. <el-header>Header</el-header>
  23. <el-container>
  24. <el-aside width="200px">Aside</el-aside>
  25. <el-container>
  26. <el-main>Main</el-main>
  27. <el-footer>Footer</el-footer>
  28. </el-container>
  29. </el-container>
  30. </el-container>
  31. <el-container>
  32. <el-aside width="200px">Aside</el-aside>
  33. <el-container>
  34. <el-header>Header</el-header>
  35. <el-main>Main</el-main>
  36. </el-container>
  37. </el-container>
  38. <el-container>
  39. <el-aside width="200px">Aside</el-aside>
  40. <el-container>
  41. <el-header>Header</el-header>
  42. <el-main>Main</el-main>
  43. <el-footer>Footer</el-footer>
  44. </el-container>
  45. </el-container>
  46. <style>
  47. .el-header, .el-footer {
  48. background-color: #B3C0D1;
  49. color: #333;
  50. text-align: center;
  51. line-height: 60px;
  52. }
  53. .el-aside {
  54. background-color: #D3DCE6;
  55. color: #333;
  56. text-align: center;
  57. line-height: 200px;
  58. }
  59. .el-main {
  60. background-color: #E9EEF3;
  61. color: #333;
  62. text-align: center;
  63. line-height: 160px;
  64. }
  65. body > .el-container {
  66. margin-bottom: 40px;
  67. }
  68. .el-container:nth-child(5) .el-aside,
  69. .el-container:nth-child(6) .el-aside {
  70. line-height: 260px;
  71. }
  72. .el-container:nth-child(7) .el-aside {
  73. line-height: 320px;
  74. }
  75. </style>

实例

  1. <el-container style="height: 500px; border: 1px solid #eee">
  2. <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  3. <el-menu :default-openeds="['1', '3']">
  4. <el-submenu index="1">
  5. <template slot="title"><i class="el-icon-message"></i>导航一</template>
  6. <el-menu-item-group>
  7. <template slot="title">分组一</template>
  8. <el-menu-item index="1-1">选项1</el-menu-item>
  9. <el-menu-item index="1-2">选项2</el-menu-item>
  10. </el-menu-item-group>
  11. <el-menu-item-group title="分组2">
  12. <el-menu-item index="1-3">选项3</el-menu-item>
  13. </el-menu-item-group>
  14. <el-submenu index="1-4">
  15. <template slot="title">选项4</template>
  16. <el-menu-item index="1-4-1">选项4-1</el-menu-item>
  17. </el-submenu>
  18. </el-submenu>
  19. <el-submenu index="2">
  20. <template slot="title"><i class="el-icon-menu"></i>导航二</template>
  21. <el-menu-item-group>
  22. <template slot="title">分组一</template>
  23. <el-menu-item index="2-1">选项1</el-menu-item>
  24. <el-menu-item index="2-2">选项2</el-menu-item>
  25. </el-menu-item-group>
  26. <el-menu-item-group title="分组2">
  27. <el-menu-item index="2-3">选项3</el-menu-item>
  28. </el-menu-item-group>
  29. <el-submenu index="2-4">
  30. <template slot="title">选项4</template>
  31. <el-menu-item index="2-4-1">选项4-1</el-menu-item>
  32. </el-submenu>
  33. </el-submenu>
  34. <el-submenu index="3">
  35. <template slot="title"><i class="el-icon-setting"></i>导航三</template>
  36. <el-menu-item-group>
  37. <template slot="title">分组一</template>
  38. <el-menu-item index="3-1">选项1</el-menu-item>
  39. <el-menu-item index="3-2">选项2</el-menu-item>
  40. </el-menu-item-group>
  41. <el-menu-item-group title="分组2">
  42. <el-menu-item index="3-3">选项3</el-menu-item>
  43. </el-menu-item-group>
  44. <el-submenu index="3-4">
  45. <template slot="title">选项4</template>
  46. <el-menu-item index="3-4-1">选项4-1</el-menu-item>
  47. </el-submenu>
  48. </el-submenu>
  49. </el-menu>
  50. </el-aside>
  51. <el-container>
  52. <el-header style="text-align: right; font-size: 12px">
  53. <el-dropdown>
  54. <i class="el-icon-setting" style="margin-right: 15px"></i>
  55. <el-dropdown-menu slot="dropdown">
  56. <el-dropdown-item>查看</el-dropdown-item>
  57. <el-dropdown-item>新增</el-dropdown-item>
  58. <el-dropdown-item>删除</el-dropdown-item>
  59. </el-dropdown-menu>
  60. </el-dropdown>
  61. <span>王小虎</span>
  62. </el-header>
  63. <el-main>
  64. <el-table :data="tableData">
  65. <el-table-column prop="date" label="日期" width="140">
  66. </el-table-column>
  67. <el-table-column prop="name" label="姓名" width="120">
  68. </el-table-column>
  69. <el-table-column prop="address" label="地址">
  70. </el-table-column>
  71. </el-table>
  72. </el-main>
  73. </el-container>
  74. </el-container>
  75. <style>
  76. .el-header {
  77. background-color: #B3C0D1;
  78. color: #333;
  79. line-height: 60px;
  80. }
  81. .el-aside {
  82. color: #333;
  83. }
  84. </style>
  85. <script>
  86. export default {
  87. data() {
  88. const item = {
  89. date: '2016-05-02',
  90. name: '王小虎',
  91. address: '上海市普陀区金沙江路 1518 弄'
  92. };
  93. return {
  94. tableData: Array(20).fill(item)
  95. }
  96. }
  97. };
  98. </script>

Container Attributes

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

Header Attributes

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

Aside Attributes

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