vue Element动态设置el-menu导航当前选中项

JavaScript dayaoge 6个月前 (10-20) 1351次浏览

Element UI 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。
官方文档给出了设置默认选中的属性。

Menu Attribute

参数	说明	类型	可选值	默认值
mode	模式	string	horizontal,vertical	vertical
theme	主题色	string	light,dark	light
default-active	当前激活菜单的 index	string	—	—
default-openeds	当前打开的submenu的 key 数组	Array	—	—
unique-opened	是否只保持一个子菜单的展开	boolean	—	false
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	—	false

设置:default-active即可。
可是如果不是从导航切换进页面的，比如从上一个页面里的按钮点击进入该界面，就不知道怎么设置当前选中项了。

那只能自己想办法了。
因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的，所以我就想，在进入组件的时候，设置公共变量值adminleftnavnum为导航的index，然后在导航所在的组件watch该变量，
设置el-menu的 :active=”adminleftnavnum”，这样基本上就可以实现该效果了。

1、引入扩展库

要使用公共变量，我们先引入vue.js的状态管理扩展vuex。

import Vuex from 'vuex'
Vue.use(Vuex)

2、注册新Store

const store = new Vuex.Store({
state: {
count: 0,
adminleftnavnum:"1" //管理后台左侧导航
},
mutations: {
increment (state) {
state.count++
}
}
})

3、创建和挂载根实例

new Vue({
el: '#app',
router,
store,
render: h => h(App)
})

4、在导航所在的组件设置

4-1、设置el-menu的active

<el-menu :default-active="navselected" :active="navselected" @select="selectItems" class="el-menu-admin" theme="dark" router>

4-2、添加变量和改变方法等

export default {
data() {
return {
form: {
name: '',
password: ''
},
navtype:"horizontal",
navselected:"1"
}
},
methods: {
onSubmit() {
},
getNavType(){
this.navselected=this.$store.state.adminleftnavnum;
//store.state.adminleftnavnum里值变化的时候，设置navselected
},
selectItems(index){
this.$store.state.adminleftnavnum=index;
//按钮选中之后设置当前的index为store里的值。
}
}
watch: {
// 监测store.state
'$store.state.adminleftnavnum': 'getNavType'
}
}

5、在其他组件改变this.$store.state.adminleftnavnum的值即可

export default {
created () {
this.$store.state.adminleftnavnum="2-2"; //设置左侧导航2-2 active
}
}

在官网也没找到便捷的方法，如果有道友找到，还请指点一二。