vue实现el-menu和el-tab联动的示例代码

来源：jb51　　时间：2023/4/14 9:17:43　　对本文有异议

vue通过el-menus和el-tabs联动，实现点击侧边栏，页面内显示一行tab以及点击tab切换路由

实现效果如下

实现思路左侧边栏添加点击事件/设置el-menu的路由模式，然后监听路由的变化，拿到的路由去改变el-tabs绑定的属性，然后改变el-tab-pane循环的数组，然后设置el-tabs的点击/删除事件，最终实现联动首先使用vuex定义公共状态openTab以及activeIndexTab 也就是循环的数组和当前高亮

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    openTab: [],
    activeIndexTab: ''
  },
  mutations: {
  //添加tab事件
    add_tabs (state, data) {
      state.openTab.push(data)
    },
    //删除
    delete_tabs (state, name) {
      let index = 0
      for (let item of state.openTab) {
        if (item.name === name) {
          break
        }
        index++
      }
      state.openTab.splice(index, 1)
    },
    //设置高亮tab
    set_active_index (state, index) {
      state.activeIndexTab = index
    },
  },
})

html模板

<el-menu>
 <div v-for="(item, index) in menuList" :key="index">
   <el-menu-item :index="item.index" :class="{'isActive':activeIndex == item.index}" @click="routeTo(item)">
     <i :class="['icon', item.name]"></i>
     <span slot="title">{{ item.title }}</span>
   </el-menu-item>
 </div>
</el-menu>
<el-tabs v-model="activeIndexTab" type="card" @tab-click="clickTab" @tab-remove="removeTab" closable>
 <el-tab-pane v-for="item of openTab" v-if="openTab.length" :key="item.title" :label="item.title" :name="item.name">
 </el-tab-pane>
</el-tabs>

定义data函数中要用到的属性

data() {
 return {
   activeIndex: "",
   menuList:[
     {"index":"1","title":"商户资料管理","name":"meansManage"},
     {"index":"2","title":"商户订单管理","name":"payOrderManage"},
     {"index":"3","title":"商户报表管理","name":"reportManage"},
   ]
 }
},

在vuex中取到el-tabs用到的属性

 computed: {
   openTab () {
     return this.$store.state.openTab
   },
   activeIndexTab: {
     get () {
       return this.$store.state.activeIndexTab
     },
     set (val) {
       this.$store.commit('set_active_index', val)
     }
   },
 },

路由配置信息如下

{
  path: "/",
  component: frame,
  redirect: "/meansManage",
  children: [
    {
      path: "/meansManage",
      name: "meansManage",
      meta:{title:'商户资料管理'},
      component: () => import("../components/merchantManage/meansManage/index.vue")
    },
    {
      path: "/payOrderManage",
      name: "payOrderManage",
      meta:{title:'商户订单管理'},
      component: () => import("../components/merchantManage/payOrderManage/orderIndex.vue")
    },
    {
      path:'/reportManage',
      name:'reportManage',
      meta:{title:'商户报表管理'},
      component: () => import('../components/merchantManage/reportManage/index.vue')
    }
  ]
},

随后监听路由变化在watch中

watch:{
   '$route'(val){
     let flag = false
     this.openTab.forEach(tab => {
       if (val.path == tab.name) {
         this.$store.commit('set_active_index',val.path)
         flag = true
         return
       }
     })
     if (!flag) {
       this.$store.commit('add_tabs', {name: val.path , title: val.meta.title})
       this.$store.commit('set_active_index', val.path)
     }
   }
 },

上面的代码大概意思就是，如果openTab中已经存在这个路由，则直接设置高亮tab，如果不存在，则先添加路由信息到openTab中，然后再设置高亮

7. 当前页面刷新，需要保留一个tab也就是当前页的

mounted(){
	this.$store.commit('add_tabs', {name: this.$route.path , title: this.$route.meta.title})
	this.$store.commit('set_active_index', this.$route.path)
}

设置tab的点击事件

clickTab (tab) {
  this.$router.push({path: this.activeIndexTab})
},
removeTab (target) { //target当前被点击的name属性
  if (this.openTab.length == 1) {
    return
  }
  this.$store.commit('delete_tabs', target)
  if (this.activeIndexTab === target) {
    // 设置当前激活的路由
    if (this.openTab && this.openTab.length >= 1) {
      this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].name)
      this.$router.push({path: this.activeIndexTab})
    }
  }
},