vue实现el-menu和el-tab联动的示例代码
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}) } }},