<el-container> 

Container 布局容器

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

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

<el-header>:顶栏容器。

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

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

<el-footer>:底栏容器。

以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>

<el-container>
      <el-aside width="180px">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/account">账号信息</el-menu-item>
              <el-menu-item>修改密码</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>公司信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item>用户管理</el-menu-item>
              <el-menu-item>添加/编辑用户</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- <el-menu default-active="1">
      <el-submenu >
        <el-menu-item></el-menu-item>
      </el-submenu>
    </el-menu> -->

        <!-- id="app" -->
        <!-- <img src="./assets/logo.png"> -->
        <router-view />
      </el-main>
    </el-container>