element plus的容器组件

element-plus的容器组件主要有el-container,el-aside,el-header,el-main,el-footer,后面4个组件其父组件必须是el-container。

el-container采用flex布局，如果其子元素包含el-header或el-footer时会采用垂直布局，否则会采用水平布局，可设置其direction属性为’horizontal’ | ‘vertical’。

el-aside为侧边栏组件，可设置其width属性

el-main为主区域容器

el-header为头部容器

el-footer为尾部容器

<template>
  
    <el-container :direction="vertical" style="height: 90vh">
      <el-header height="" style="background-color: orange;">
        <!-- Header content -->
      </el-header>
      <el-container :direction="horizontal">
        <el-aside width="200px">
          <!-- Aside content -->
        </el-aside>
        <el-container :direction="vertical">
          <el-main height="" class="item" style="height: 90%">
            <!-- Main content -->
          </el-main>
          <el-footer height="" style="background-color: blue;">
            <!-- Footer content -->
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
    

</template>

<style scoped>
.item {
  background-color: red;
}

</style>

https://element-plus.org/zh-CN/component/container.html#main-api