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。

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

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

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. }

在官網也沒找到便捷的方法，如果有道友找到，還請指點一二。