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


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

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

  • 相关阅读:
    初始值设定元素不是常量(全局变量初始化问题)
    vim配置成c++IDE
    Linux 命令总结
    gdb用法
    Elasticsearch mysql 增量同步
    Spring MVC4 纯注解配置教程
    Xposed Module开发教程1
    Glide 下载Gif文件
    Android开发艺术探索读书笔记——01 Activity的生命周期
    仿微信朋友圈图片查看-glide加载网络图片,photoview 实现缩放
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6762527.html
Copyright © 2020-2023  润新知