1.安装--然后在src/main.js中 导入 和 使用
2修改:common/sidebar.vue ,page/ echarts.vue , router/index.js , src/main.js
3sidebar.vue
<template>
<div class="sidebar">
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
unique-opened
router
>
<template v-for="item in items">
<template v-if="item.subs">
<!-- 一级菜单-->
<el-submenu :index="item.index" :key="item.index">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{
{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<el-submenu
v-if="subItem.subs"
:index="subItem.index"
:key="subItem.index"
>
<template slot="title"><i :class="subItem.icon"></i>{
{ subItem.title }}</template>
<!-- 二级菜单-->
<el-menu-item
v-for="(threeItem,i) in subItem.subs"
:key="i"
:index="threeItem.index"
><i :class="threeItem.icon"></i>{
{ threeItem.title }}</el-menu-item>
</el-submenu>
<!-- :key="subItem.index" 删掉的39行 -->
<el-menu-item
v-else
:index="subItem.index"
><i :class="subItem.icon"></i>{
{ subItem.title }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i>
<span slot="title">{
{ item.title }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
<script>
import bus from '../common/bus';
export default {
data() {
return {
collapse: false,
items:[],
//管理员菜单userType=0
itemList3: [
{
"id":4,
"pid":1,
"icon":"el-icon-s-order",
"index":"3",
"title":"统一管理",
"subs":[
{
"id":9,
"pid":4,
"icon":"el-icon-plus",
"index":"user",
"title":"用户管理",
"subs":null
},
{