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