element plus布局容器

Element Plus 提供了多种布局容器组件，用于快速搭建页面的布局结构。以下是 Element Plus 中常用的布局容器组件：

1. `<el-container>`：最外层的容器，用于包裹整个页面内容。它可以被分成上下两部分（header、footer），也可以只有一个部分。

<el-container>
  <el-header>头部内容</el-header>
  <el-main>主体内容</el-main>
  <el-footer>底部内容</el-footer>
</el-container>

2. `<el-header>`：位于 `<el-container>` 内的顶部容器，一般用于放置导航栏、标题等内容。

<el-container>
  <el-header>头部内容</el-header>
  <el-main>主体内容</el-main>
</el-container>

3. `<el-aside>`：位于 `<el-container>` 内的侧边容器，一般用于放置导航菜单、侧边栏等内容。

<el-container>
  <el-aside>侧边栏内容</el-aside>
  <el-main>主体内容</el-main>
</el-container>

4. `<el-main>`：位于 `<el-container>` 内的主体容器，用于放置主要的页面内容。

<el-container>
  <el-main>主体内容</el-main>
</el-container>

5. `<el-footer>`：位于 `<el-container>` 内的底部容器，一般用于放置页脚、版权信息等内容。

<el-container>
  <el-main>主体内容</el-main>
  <el-footer>底部内容</el-footer>
</el-container>

这些布局容器组件可以根据实际需求进行灵活组合，实现不同的页面布局效果。