欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼

 更新時(shí)間：2023年04月13日 16:16:28   作者：hjt_未來(lái)可期  
本文主要介紹了vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vue通過(guò)el-menus和el-tabs聯(lián)動(dòng)，實(shí)現(xiàn)點(diǎn)擊側(cè)邊欄，頁(yè)面內(nèi)顯示一行tab以及點(diǎn)擊tab切換路由

實(shí)現(xiàn)效果如下

實(shí)現(xiàn)思路 左側(cè)邊欄添加點(diǎn)擊事件/設(shè)置el-menu的路由模式，然后監(jiān)聽路由的變化，拿到的路由去改變el-tabs綁定的屬性，然后改變el-tab-pane循環(huán)的數(shù)組，然后設(shè)置el-tabs的點(diǎn)擊/刪除事件，最終實(shí)現(xiàn)聯(lián)動(dòng) 首先使用vuex定義公共狀態(tài)openTab以及activeIndexTab 也就是循環(huán)的數(shù)組和當(dāng)前高亮

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)
    },
    //設(shè)置高亮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函數(shù)中要用到的屬性

data() {
 return {
   activeIndex: "",
   menuList:[
     {"index":"1","title":"商戶資料管理","name":"meansManage"},
     {"index":"2","title":"商戶訂單管理","name":"payOrderManage"},
     {"index":"3","title":"商戶報(bào)表管理","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:'商戶報(bào)表管理'},
      component: () => import('../components/merchantManage/reportManage/index.vue')
    }
  ]
},

隨后監(jiān)聽路由變化在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中已經(jīng)存在這個(gè)路由，則直接設(shè)置高亮tab，如果不存在，則先添加路由信息到openTab中，然后再設(shè)置高亮

7. 當(dāng)前頁(yè)面刷新，需要保留一個(gè)tab也就是當(dāng)前頁(yè)的

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

設(shè)置tab的點(diǎn)擊事件

clickTab (tab) {
  this.$router.push({path: this.activeIndexTab})
},
removeTab (target) { //target當(dāng)前被點(diǎn)擊的name屬性
  if (this.openTab.length == 1) {
    return
  }
  this.$store.commit('delete_tabs', target)
  if (this.activeIndexTab === target) {
    // 設(shè)置當(dāng)前激活的路由
    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})
    }
  }
},

最終完美實(shí)現(xiàn)想要的效果。

到此這篇關(guān)于vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)el-menu和el-tab聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論