• Container 布局容器
    • 常见页面布局
    • 实例
    • Container Attributes
    • Header Attributes
    • Aside Attributes
    • Footer Attributes

    Container 布局容器

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

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

    <el-header>:顶栏容器。

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

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

    <el-footer>:底栏容器。

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

    常见页面布局

    Container 布局容器 - 图1

    Container 布局容器 - 图2

    Container 布局容器 - 图3

    Container 布局容器 - 图4

    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>

    显示代码

    实例

    Container 布局容器 - 图5

    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

    原文: http://element-cn.eleme.io/#/zh-CN/component/container