vue實(shí)現(xiàn)el-menu和el-tab聯(lián)動(dòng)的示例代碼
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)聽(tīng)路由的變化，拿到的路由去改變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)聽(tīng)路由變化在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})????}??}},標(biāo)簽：
