vue實現el-menu和el-tab聯動的示例代碼

Posted on by

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})
    }
  }
},

最終完美實現想要的效果。

到此這篇關於vue實現el-menu和el-tab聯動的示例代碼的文章就介紹到這瞭,更多相關el-menu和el-tab聯動內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：