elementui如何将页面分为左右两部分

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了丰富的 UI 组件以帮助开发者快速构建优雅的网页。在 Element UI 中，如果你想要将页面分为左右两部分，你可以使用布局组件中的`<el-container>`，以及`<el-header>`、`<el-aside>`、`<el-main>`等组件来实现一个典型的左右两栏布局。

以下是一个简单的示例代码，展示如何使用这些组件来创建左右分栏的布局：

<template>
  <el-container style="height: 600px;">
    <el-aside width="200px">
      <!-- 这里是侧边栏内容 -->
      <div>侧边栏区域</div>
    </el-aside>

    <el-container>
      <el-header>
        <!-- 这里是头部区域 -->
        <div>头部区域</div>
      </el-header>

      <el-main>
        <!-- 这里是主要内容区域 -->
        <div>主要区域内容</div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 组件选项
};
</script>

<style>
/* 你的样式代码 */
</style>

在这个例子中：
- `<el-container>` 是一个布局容器，其子组件将被分为两行显示。
- `<el-aside>` 用作侧边栏，它的宽度被设置为200px。
- `<el-main>` 用于承载页面的主要内容。
- `<el-header>` 用于放置页面头部信息。

通过适当配置这些组件的属性，你可以灵活地调整布局，比如改变侧边栏的宽度、布局的行列数等，来满足你的页面设计需求。