vue Element动态设置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。
- import Vuex from 'vuex'
- Vue.use(Vuex)
2、注册新Store
- const store = new Vuex.Store({
- state: {
- count: 0,
- adminleftnavnum:"1" //管理后台左侧导航
- },
- mutations: {
- increment (state) {
- state.count++
- }
- }
- })
3、创建和挂载根实例
- new Vue({
- el: '#app',
- router,
- store,
- render: h => h(App)
- })
4、在导航所在的组件设置
4-1、设置el-menu的active
- <el-menu :default-active="navselected" :active="navselected" @select="selectItems" class="el-menu-admin" theme="dark" router>
4-2、添加变量和改变方法等
- export default {
- data() {
- return {
- form: {
- name: '',
- password: ''
- },
- navtype:"horizontal",
- navselected:"1"
- }
- },
- methods: {
- onSubmit() {
- },
- getNavType(){
- this.navselected=this.$store.state.adminleftnavnum;
- //store.state.adminleftnavnum里值变化的时候,设置navselected
- },
- selectItems(index){
- this.$store.state.adminleftnavnum=index;
- //按钮选中之后设置当前的index为store里的值。
- }
- }
- watch: {
- // 监测store.state
- '$store.state.adminleftnavnum': 'getNavType'
- }
- }
5、在其他组件改变this.$store.state.adminleftnavnum的值即可
- export default {
- created () {
- this.$store.state.adminleftnavnum="2-2"; //设置左侧导航2-2 active
- }
- }
在官网也没找到便捷的方法,如果有道友找到,还请指点一二。