element-ui侧边栏
官网地址.
代码:
<el-menu :default-openeds="['1','3']" //默认index为1和3的菜单展开,这里不加冒号好像收缩功能就失效了
default-active="2" //默认选中的菜单
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1"> //el-submenu:可展开的菜单,index是文本类型,不是数值类型
<template slot="title"> //对应的菜单名
<i class="el-icon-location"></i> //小图标
<span>导航一</span> //
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item> //子节点,不可展开
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<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-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
动态构建侧边栏
<el-menu :default-openeds="['0','1']" :router="$route">
<!--获取index.js的routes:$router.options.routes -->
//获取index.js中routes的信息和index值
<el-submenu v-for="(item,index) in $router.options.routes"
:key="index"
:index="index+''"> //赋值
<template slot="title">
<i class="el-icon-message"></i>{{item.name}}</template>
//获取上面得到的item的子组件信息
<el-menu-item v-for="(item2, index2) in item.children"
:key="index2"
:index="item2.path" //赋值
:class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item> //被点中后的样式
</el-submenu>
</el-menu>