3. 左侧菜单

文档

http://element.eleme.io/#/zh-CN/component/menu

   <!-- el菜单结构 -->
              <el-menu default-active="1-4-1" class="el-menu-vertical-demo">
  
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span slot="title">导航一</span>
                    </template>

                    <el-submenu index="1-4">
                      <span slot="title">选项4</span>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                    
                  </el-submenu>


                  <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>

                </el-menu>

1. 每个菜单有一个索引index唯一标识

• el-menu的属性

1. default-active 默认选中的索引
2. collapse

展开和关闭
:collapse="isCollapse"

问题点：

展开和关闭动画生硬 

菜单结构

               <!-- el菜单结构 -->
              <el-menu default-active="0" :collapse="collapsed">

                 
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span slot="title">系统菜单</span>
                    </template>

                    <el-menu-item  index="1-1">
                       <i class="el-icon-message"></i>
                      <span slot="title">菜单管理</span>
                    </el-menu-item >

                    <el-menu-item  index="1-2">
                       <i class="el-icon-message"></i>
                      <span slot="title">角色管理</span>
                    </el-menu-item >
                   <el-menu-item  index="1-3">
                       <i class="el-icon-message"></i>
                      <span slot="title">用户管理</span>
                    </el-menu-item >
                  </el-submenu>


                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <span slot="title">文章管理</span>
                    </template>

                    <el-menu-item  index="2-1">
                       <i class="el-icon-message"></i>
                      <span slot="title">文章分类</span>
                    </el-menu-item >

                    <el-menu-item  index="2-2">
                       <i class="el-icon-message"></i>
                      <span slot="title">文章列表</span>
                    </el-menu-item >

                   <el-menu-item  index="2-3">
                       <i class="el-icon-message"></i>
                      <span slot="title">回收站</span>
                    </el-menu-item >
                  </el-submenu>

                  <el-menu-item index="3">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>

                </el-menu>


         </aside>