效果图
第一步:设置左侧菜单栏
左侧菜单栏,左侧菜单我这边自定义写死的数据。
分为有子菜单和没子菜单等情况,我用到的只有俩种,没有三级菜单。
HTML部分
<el-menu
unique-opened
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
> <!-- 没有子菜单 -->
<el-menu-item
:index="item.path"
v-for="item in noChildren"
:key="item.path"
@click="clickMenu(item)"
>
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>
<!-- 有子菜单数据 -->
<el-submenu
index="index"
v-for="(item, index) in hasChildren"
:key="index">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span>{
{ item.label }}</sp