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

Menu Attribute

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

设置: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. }

 

Logo

前往低代码交流专区

更多推荐