Element3

Appearance

Return to top
On this page

Container 布局组件

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

<el-container>：外层容器。当子元素中存在 <el-header> 或者 <el-footer> 时，全部子元素会进行垂直从上到下的排列，反之会进行水平从左到右的排列。

<el-header>：头部顶栏的容器。

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

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

<el-footer>：底部底栏的容器。

TIP

以上组件都采用了 flex 布局，使用前请确定浏览器是否兼容。此外，<el-container> 的子元素只能是后四者以及<el-container>，后四者的父元素只能是<el-container>。后四者的子元素可以是其它元素，比如普通元素div、组件 el-menu等。

常见页面布局

Header
Main

Header
Main
Footer

Main

Header
Main

Header
Main
Footer

Header
Main

Header
Main
Footer

<!-- 上下 -->
<el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
</el-container>

<br/>

<!-- 上中下 -->
<el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
</el-container>

<br/>

<!-- 左右 -->
<el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
</el-container>

<br/>

<!-- 上中<左右> -->
<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>

<br/>

<!-- 上中<左右<中下>> -->
<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>

<br/>

<!-- 左右<上中> -->
<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>

<br/>

<!-- 左右<上中下> -->
<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>

<br/>

<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>

实例

Hello Wrold
idnameaddress
1王小虎 1浦东新区 唐镇 1
2王小虎 2浦东新区 唐镇 2
3王小虎 3浦东新区 唐镇 3
4王小虎 4浦东新区 唐镇 4
5王小虎 5浦东新区 唐镇 5
6王小虎 6浦东新区 唐镇 6
7王小虎 7浦东新区 唐镇 7
8王小虎 8浦东新区 唐镇 8
9王小虎 9浦东新区 唐镇 9
10王小虎 10浦东新区 唐镇 10
11王小虎 11浦东新区 唐镇 11
12王小虎 12浦东新区 唐镇 12
13王小虎 13浦东新区 唐镇 13
14王小虎 14浦东新区 唐镇 14
15王小虎 15浦东新区 唐镇 15
16王小虎 16浦东新区 唐镇 16
17王小虎 17浦东新区 唐镇 17
18王小虎 18浦东新区 唐镇 18
19王小虎 19浦东新区 唐镇 19
20王小虎 20浦东新区 唐镇 20
<el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
        <p v-for="item in asideList" :key="item">
           <a href="javascript:void(0);">{{item}}</a>
        </p>
    </el-aside>

    <el-container>
        <el-header>
            <div>{{headerTitle}}</div>
        </el-header>
        <el-main>
            <table style="width: 100%;">
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
                <tr v-for="row in mainContentList" :key="row.id">
                    <td>{{row.id}}</td>
                    <td>{{row.name}}</td>
                    <td>{{row.address}}</td>
                </tr>
            </table>
        </el-main>
    </el-container>
</el-container>

<script lang="ts" setup>
const asideList = Array(20).fill(1).map((_, i) => `菜单项 ${ i + 1 }`);
const headerTitle = `Hello Wrold`
const mainContentList = Array(20).fill(1).map((_, i) => ({
    id: i + 1,
    name: `王小虎 ${ i + 1 }`,
    address: `浦东新区 唐镇 ${ i + 1 }`
}))
</script>

<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    text-align: center;
}

.el-aside {
    color: #333;
}
</style>

Container Attributes

参数说明类型可选值默认值
direction子元素的排列方向stringhorizontal（水平） / vertical（垂直）子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal

Header Attributes

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

Aside Attributes

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