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，页⾯通过<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. unt++
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⾥的值。vue element admin
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. }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。