文檔
http://element.eleme.io/#/zh-CN/component/menu
<!-- el菜單結(jié)構(gòu) -->
<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">導(dǎo)航一</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">導(dǎo)航二</span>
</el-menu-item>
</el-menu>
- 每個菜單有一個索引index唯一標(biāo)識
- el-menu的屬性
- default-active 默認(rèn)選中的索引
- collapse
展開和關(guān)閉
:collapse="isCollapse"
問題點：
展開和關(guān)閉動畫生硬
菜單結(jié)構(gòu)
<!-- el菜單結(jié)構(gòu) -->
<el-menu default-active="0" :collapse="collapsed">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">系統(tǒng)菜單</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">導(dǎo)航二</span>
</el-menu-item>
</el-menu>
</aside>
