Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

TIP

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 <el-container>

常见页面布局

Container 布局容器 - 图1

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-header>Header</el-header>
  5.       <el-main>Main</el-main>
  6.     </el-container>
  7.   </div>
  8. </template>

Container 布局容器 - 图2

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-header>Header</el-header>
  5.       <el-main>Main</el-main>
  6.       <el-footer>Footer</el-footer>
  7.     </el-container>
  8.   </div>
  9. </template>

Container 布局容器 - 图3

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-aside width="200px">Aside</el-aside>
  5.       <el-main>Main</el-main>
  6.     </el-container>
  7.   </div>
  8. </template>

Container 布局容器 - 图4

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-header>Header</el-header>
  5.       <el-container>
  6.         <el-aside width="200px">Aside</el-aside>
  7.         <el-main>Main</el-main>
  8.       </el-container>
  9.     </el-container>
  10.   </div>
  11. </template>

Container 布局容器 - 图5

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-header>Header</el-header>
  5.       <el-container>
  6.         <el-aside width="200px">Aside</el-aside>
  7.         <el-container>
  8.           <el-main>Main</el-main>
  9.           <el-footer>Footer</el-footer>
  10.         </el-container>
  11.       </el-container>
  12.     </el-container>
  13.   </div>
  14. </template>

Container 布局容器 - 图6

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-aside width="200px">Aside</el-aside>
  5.       <el-container>
  6.         <el-header>Header</el-header>
  7.         <el-main>Main</el-main>
  8.       </el-container>
  9.     </el-container>
  10.   </div>
  11. </template>

Container 布局容器 - 图7

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-aside width="200px">Aside</el-aside>
  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.   </div>
  12. </template>

例子

Container 布局容器 - 图8

  1. <template>
  2.   <el-container class="layout-container-demo" style="height: 500px">
  3.     <el-aside width="200px">
  4.       <el-scrollbar>
  5.         <el-menu :default-openeds="['1', '3']">
  6.           <el-sub-menu index="1">
  7.             <template #title>
  8.               <el-icon><message /></el-icon>Navigator One
  9.             </template>
  10.             <el-menu-item-group>
  11.               <template #title>Group 1</template>
  12.               <el-menu-item index="1-1">Option 1</el-menu-item>
  13.               <el-menu-item index="1-2">Option 2</el-menu-item>
  14.             </el-menu-item-group>
  15.             <el-menu-item-group title="Group 2">
  16.               <el-menu-item index="1-3">Option 3</el-menu-item>
  17.             </el-menu-item-group>
  18.             <el-sub-menu index="1-4">
  19.               <template #title>Option4</template>
  20.               <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
  21.             </el-sub-menu>
  22.           </el-sub-menu>
  23.           <el-sub-menu index="2">
  24.             <template #title>
  25.               <el-icon><icon-menu /></el-icon>Navigator Two
  26.             </template>
  27.             <el-menu-item-group>
  28.               <template #title>Group 1</template>
  29.               <el-menu-item index="2-1">Option 1</el-menu-item>
  30.               <el-menu-item index="2-2">Option 2</el-menu-item>
  31.             </el-menu-item-group>
  32.             <el-menu-item-group title="Group 2">
  33.               <el-menu-item index="2-3">Option 3</el-menu-item>
  34.             </el-menu-item-group>
  35.             <el-sub-menu index="2-4">
  36.               <template #title>Option 4</template>
  37.               <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
  38.             </el-sub-menu>
  39.           </el-sub-menu>
  40.           <el-sub-menu index="3">
  41.             <template #title>
  42.               <el-icon><setting /></el-icon>Navigator Three
  43.             </template>
  44.             <el-menu-item-group>
  45.               <template #title>Group 1</template>
  46.               <el-menu-item index="3-1">Option 1</el-menu-item>
  47.               <el-menu-item index="3-2">Option 2</el-menu-item>
  48.             </el-menu-item-group>
  49.             <el-menu-item-group title="Group 2">
  50.               <el-menu-item index="3-3">Option 3</el-menu-item>
  51.             </el-menu-item-group>
  52.             <el-sub-menu index="3-4">
  53.               <template #title>Option 4</template>
  54.               <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
  55.             </el-sub-menu>
  56.           </el-sub-menu>
  57.         </el-menu>
  58.       </el-scrollbar>
  59.     </el-aside>
  61.     <el-container>
  62.       <el-header style="text-align: right; font-size: 12px">
  63.         <div class="toolbar">
  64.           <el-dropdown>
  65.             <el-icon style="margin-right: 8px; margin-top: 1px"
  66.               ><setting
  67.             /></el-icon>
  68.             <template #dropdown>
  69.               <el-dropdown-menu>
  70.                 <el-dropdown-item>View</el-dropdown-item>
  71.                 <el-dropdown-item>Add</el-dropdown-item>
  72.                 <el-dropdown-item>Delete</el-dropdown-item>
  73.               </el-dropdown-menu>
  74.             </template>
  75.           </el-dropdown>
  76.           <span>Tom</span>
  77.         </div>
  78.       </el-header>
  80.       <el-main>
  81.         <el-scrollbar>
  82.           <el-table :data="tableData">
  83.             <el-table-column prop="date" label="Date" width="140" />
  84.             <el-table-column prop="name" label="Name" width="120" />
  85.             <el-table-column prop="address" label="Address" />
  86.           </el-table>
  87.         </el-scrollbar>
  88.       </el-main>
  89.     </el-container>
  90.   </el-container>
  91. </template>
  93. <script lang="ts" setup>
  94. import { ref } from 'vue'
  95. import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  97. const item = {
  98.   date: '2016-05-02',
  99.   name: 'Tom',
  100.   address: 'No. 189, Grove St, Los Angeles',
  101. }
  102. const tableData = ref(Array.from({ length: 20 }).fill(item))
  103. </script>
  105. <style scoped>
  106. .layout-container-demo .el-header {
  107.   position: relative;
  108.   background-color: var(--el-color-primary-light-7);
  109.   color: var(--el-text-color-primary);
  110. }
  111. .layout-container-demo .el-aside {
  112.   color: var(--el-text-color-primary);
  113.   background: var(--el-color-primary-light-8);
  114. }
  115. .layout-container-demo .el-menu {
  116.   border-right: none;
  117. }
  118. .layout-container-demo .el-main {
  119.   padding: 0;
  120. }
  121. .layout-container-demo .toolbar {
  122.   display: inline-flex;
  123.   align-items: center;
  124.   justify-content: center;
  125.   height: 100%;
  126.   right: 20px;
  127. }
  128. </style>

Container 属性

属性说明类型可选值默认值
direction子元素的排列方向stringhorizontal / vertical子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

Container 插槽

插槽名说明子标签
—自定义默认内容Container / Header / Aside / Main / Footer

Header 属性

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

Header 插槽

插槽名说明
—自定义默认内容

Aside 属性

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

Aside 插槽

插槽名说明
—自定义默认内容

Main 插槽

插槽名说明
—自定义默认内容

Footer 属性

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

Footer 插槽

插槽名说明
—自定义默认内容

源代码

组件 Container 布局容器 - 图9 • 文档 Container 布局容器 - 图10

贡献者

Container 布局容器 - 图11 三咲智子

Container 布局容器 - 图12 jeremywu

Container 布局容器 - 图13 云游君

Container 布局容器 - 图14 btea

Container 布局容器 - 图15 C.Y.Kun

Container 布局容器 - 图16 gjfei

Container 布局容器 - 图17 류한경

Container 布局容器 - 图18 Delyan Haralanov

Container 布局容器 - 图19 Hades-li

Container 布局容器 - 图20 msidolphin

Container 布局容器 - 图21 Aex

Container 布局容器 - 图22 qiang