vue element ui里面的左侧导航栏，我想要点击一级菜单让他在展开的时候改变被点击元素的样式，并且让他在展开的同时跳转到指定的页面，
<template>
<div class='sidebar' id="side">
<el-menu
class='sidebar-el-menu'
:default-active='items.active'
:collapse='collapse'
text-color='#ffffff'
active-text-color='#ffffff'
background-color='transparent'
unique-opened
router
@open="handleOpen"
@close="handleClose"
select='index'
>
<template v-for='item in items'>
<template v-if='item.subs'>
<!-- 菜单 class="ts" -->
<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'>{{ subItem.title }}</template>
<el-menu-item
v-for='(threeItem,i) in subItem.subs'
:key='i'
:index='threeItem.index'
>{{ threeItem.title }}
</el-menu-item>
</el-submenu>
<el-menu-item
v-else
:index='subItem.index'
:key='subItem.index'
>{{ 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-radio-group v-model="collapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
</el-menu>
</div>
</template>
<script>
import bus from '../common/bus';
export default {
data() {
return {
collapse: false,
items: [
{
icon: 'el-icon-lx-home',
index: 'dashboard',
active:1,
title: '首页'
},
{
icon: 'el-icon-s-cooperation',
index: 'table',
active:3,
title: '管理',
subs: [{
index: 'office_center',
title: '办公',
active:2-1,
},
{
index: 'meeting_management',
title: '管理模块'
},
{
index: 'office_assets',
title: '资产管理'
}
]
},
{
icon: 'el-icon-lx-recharge',
index: 'financial_management',
active:3,
title: '财务管理',
subs: [{
index: 'budget_management',
title: '预算管理',
},
{
index: 'revenue_management',
title: '收入管理',
},
{
index: 'expenditure_management',
title: '支出管理',
}
]
},
{
icon: 'el-icon-s-flag',
index: 'clean_trading',
title: '交投',
subs: [
{
index: 'department_work_news',
title: '工作动态'
},
{
index: 'department_file_sharing',
title: '文件分享'
}
]
},
{
icon: 'el-icon-lx-copy',
index: 'party_culture',
title: '文化',
subs: [
{
index: 'party_organization_management',
title: '组织管理'
},
{
index: 'management_Party_members',
title: '人员管理'
},
]
},
],
};
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
}
},
created() {
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
bus.$on('collapse', msg => {
this.collapse = msg;
bus.$emit('collapse-content', msg);
});
},
method: {
collapseChage() {
this.collapse = !this.collapse;
bus.$emit('collapse', this.collapse);
},
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
}
};
</script>
<style scoped>
.ts{
background-color: orange !important;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
color: #fff;
}
.el-submenu .el-menu-item {
font-size: 15px;
min-width:100px;
}
.el-submenu__title i {
color: #ffffff;
}
.el-menu-item i {
color: white;
}
.el-submenu__title * {
font-size: 15px !important;
font-family: "微软雅黑";
}
.el-menu-item * {
font-size: 15px;
font-family: "微软雅黑";
}
.el-submenu{
color: white !important;
width: 100%;
}
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
width: 15.5%;
}
.el-icon-arrow-down:before{
color: "#ffffff";
}
.el-menu-item.is-active {
background-color: orange !important;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
color: #fff;
}
.sidebar-el-menu:not(.el-menu--collapse) {
opacity: 1;
width: 180px;
z-index: 0;
left: 2px;
}
.sidebar > ul {
height: 0%;
}
.collapse-btn {
float: left;
padding: 0 16px;
cursor: pointer;
line-height: 71px;
}
</style>
想要改变代码中管理的样式，点击管理后，会改变管理的背景样式，求大佬们帮帮忙，我实在时想不出方法了
