04、ElementUI

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

5）template：对应el-submenu的菜单名&#x