我要评论技术：vue2+vuex+elementui
store/index.js文件里
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
export default new vuex.store({
state: {
tablist:[]
},
mutations: {
addtab: (state, tab) => {
// 如果tab已经存在，不添加新的tabs
if (state.tablist.some(item => item.path === tab.path)) return
state.tablist.push(tab)
}
},
getters: {
// 获取tbslist
gettabs: (state) => {
return state.tablist
}
},
actions: {
},
modules: {
}
})
功能点：
1：当前活跃的tab就是当前路由的path
2: 页面刷新，tablist数据丢失，则在刷新之前使用sessionstorage进行存储
3：删除tab的时候，活跃的tab变为被删除的前一个或者下一个，删除后重新设置活跃的tab 和tablist
4：监控路由变化，路由变化了，活跃的tab 和tablist 也要随之变化
<template>
<el-tabs
v-model="activetab"
closable
@tab-remove="removetab"
@tab-click="clickbtn"
>
<el-tab-pane
:key="index"
v-for="(item, index) in tablist"
:label="item.title"
:name="item.path"
>
{{ item.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
import store from '../../store'
export default {
name: '',
data() {
return {
// 当前活跃的tabs
activetab: '',
}
},
components: {},
computed: {
tablist() {
return store.getters['gettabs']
},
},
watch: {
$route: function () {
this.setactivetab()
this.addtab()
},
},
created() {},
mounted() {
this.beforerefresh()
this.setactivetab()
this.addtab()
},
methods: {
// 设置活跃的tab
setactivetab() {
this.activetab = this.$route.path
},
// 添加tab
addtab() {
const { path, meta } = this.$route
const tab = {
path,
title: meta.title,
}
store.commit('addtab', tab)
},
// 点击tab
clickbtn(tab) {
const { name } = tab
this.$router.push({ path: name })
},
// 删除tab
removetab(target) {
// 当前激活的tab
let active = this.activetab
const tabs = this.tablist
// 只有一个标签页的时候不允许删除
if (tabs.length === 1) return
if (active === target) {
tabs.foreach((tab, index) => {
// 如果删除的就是当前活跃的tab,就把活跃的tab变成上一个或下一个
const nexttab = tab[index + 1] || tab[index - 1]
if (nexttab) {
active = nexttab.path
}
})
}
// 重新设置当前激活的选项卡和 选项卡列表
this.activetab = active
store.state.tablist = tabs.filter((tab) => tab.path !== target)
},
// 解决刷新数据丢失问题
beforerefresh() {
window.addeventlistener('beforeunload', () => {
sessionstorage.setitem('tabsview', json.stringify(this.tablist))
})
let tabsession = sessionstorage.getitem('tabsview')
if (tabsession) {
let oldtabs = json.parse(tabsession)
if (oldtabs.length > 0) {
store.state.tablist = oldtabs
}
}
},
},
}
</script>
补充：路由
{
path: '/layout',
component: () => import('../layout/index.vue'),
children: [
{
path: 'lay1',
component: () => import('../views/lay/lay1.vue'),
meta: {
title:'选项1'
}
},
{
path: 'lay2',
component: () => import('../views/lay/lay2.vue'),
meta: {
title:'选项2'
}
},
{
path: 'lay3',
component: () => import('../views/lay/lay3.vue'),
meta: {
title:'选项3'
}
},
{
path: 'lay4',
component: () => import('../views/lay/lay4.vue'),
meta: {
title:'选项4'
}
},
}到此这篇关于elementui实现标签页与菜单栏联动的示例代码的文章就介绍到这了,更多相关element 标签页与菜单栏联动内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论