vue填坑系列之动态设置el-menu导航当前选中项

 

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,页面通过引入组件的，所以我就想，在进入组件的时候，设置公共变量值adminleftnavnum为导航的index，然后在导航所在的组件watch该变量，
设置el-menu的 :active=”adminleftnavnum”，这样基本上就可以实现该效果了。

1、引入扩展库

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

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

2、注册新Store

1. const store = new Vuex.Store({
2. state: {
3. count: 0,
4. adminleftnavnum:"1" //管理后台左侧导航
5. },
6. mutations: {
7. increment (state) {
8. state.count++
9. }
10. }
11. })

3、创建和挂载根实例

1. new Vue({
2. el: '#app',
3. router,
4. store,
5. render: h => h(App)
6. })

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

4-1、设置el-menu的active

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

1. export default {
2. data() {
3. return {
4. form: {
5. name: '',
6. password: ''
7. },
8. navtype:"horizontal",
9. navselected:"1"
10. }
11. },
12. methods: {
13. onSubmit() {
14. },
15. getNavType(){
16. this.navselected=this.$store.state.adminleftnavnum;
17. //store.state.adminleftnavnum里值变化的时候，设置navselected
18. },
19. selectItems(index){
20. this.$store.state.adminleftnavnum=index;
21. //按钮选中之后设置当前的index为store里的值。
22. }
23. }
24. watch: {
25. // 监测store.state
26. '$store.state.adminleftnavnum': 'getNavType'
27. }
28. }

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

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