ElementUI主要的标签:
1)el-container:构建整个页面框架;
<el-container style="height: 500px; border: 1px solid #eee">
2)el-aside:构建左侧菜单;
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
3)el-menu:左侧菜单内容,常用属性:index是字符串类型
- default-openeds:默认展开的菜单,通过菜单的index值来关联;
- default-active:默认选中的菜单,通过菜单的index值来关联;蓝色字体是默认选中;
<el-menu :default-openeds="['1']" :default-active="'1-1'">
完整代码:
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1']" :default-active="'1-1'">
<el-submenu index="1">
<template slot="title"><i class="el-icon-menu"></i>导航</template>
<el-menu-item index="1-1">图书查询</el-menu-item>
<el-menu-item index="1-2">图书管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
4)el-submenu:可展开的菜单,常用属性:
index:菜单的下标,文本类型,不能是数值类型。
<el-submenu index="1">