提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言一、整体页面布局与完成效果二、代码编写1.标签页引入2.标签页参数设置3.标签页的切换和关闭
总结
前言
详细介绍如何添加Tabs标签页，很简单的东西，但感觉教程很少，刚刚研究好久才弄好，记录下希望对需要者有帮助。
一、整体页面布局与完成效果
整体界面(mainview.vue)布局如下图： 代码结构 标签页主要在mainview中编写
//mainview.vue
aside侧边栏
标签页显示区域
即在Main中添加Tabs标签页，实现在侧边栏中点击功能键后，在图中红色框部分出现标签，点击可跳转界面。
登陆默认“首页界面”开启且不可关闭，其余界面可手动开启，手动关闭。 完成效果如下图：
二、代码编写
1.标签页引入
标签页代码如下
v-model="editableTabsValue" type="border-card" @tab-remove="removeTab" @tab-click="clickTab"> v-for="item in editableTabs" :closable="item.close" :key="item.name" :label="item.title" :name="item.name" > {{item.content}}
2.标签页参数设置
2.1 标签页主要参数 标签页的数据存放在vuex的store中，在store.state中添加两个参数的定义，设置的初始数据为“首页界面”的数据。
state: {
//当前打开的界面路由，初始值为主页的路由
editableTabsValue:'/mainview/index',
//存放当前打开的标签页的数组，初始时只有首页
editableTabs:[{
title:'首页',//标签页名
name:'/mainview/index',//标签页路由
close:false//该标签页是否可关闭，这里是首页标签页不可被关闭
}]
},
2.2 打开和切换标签页方法 然后在mutation中添加两个方法，操作这两个参数，以控制标签页的打开和切换。
ADD_TABS:(state,tab)=>{//增加标签页方法
//在editableTabs中查找此界面是否已打开，否进入if
if(state.editableTabs.findIndex(e=>e.name===tab.path)===-1){
state.editableTabs.push({//添加当前标签页进入editableTabs
title:tab.name,
name:tab.path,
close:true//使除了首页标签页外其他都可关闭
})
}
state.editableTabsValue=tab.path//添加标签页后默认打开
},
CHANGE_TABS:(state,name)=>{//切换标签页方法
//将需打开标签页路由赋予editableTabsvalue
state.editableTabsValue=name
},
2.3 mainview中添加数据 在mainview的data中添加并获取state中的数据，注意引入ref 2.4 侧边栏相关设置 在leftbar.vue的data中添加参数submenuList,用于存放侧边导航栏栏位数据。 此处代码为elementUI导航栏代码，不做过多解释，注意添加opentab方法。 2.5 标签页的打开 opentab方法，点击侧边栏栏位以打开标签页，调用ADD_TABS方法。 注意：1、导入store 2、此方法写在leftbar.vue中，也就是说只有点击侧边栏才能打开标签页。
侧边栏效果如下图：
3.标签页的切换和关闭
3.1切换标签页方法 前面已经在store的mutation中写过打开（ADD_TABS）和切换(CHANGE_TABS)两个方法了，opentab写在侧边栏（leftbar.vue）中，调用了打开方法（ADD_TABS）以实现点击侧边栏打开标签页。 调用切换(CHANGE_TABS)的方法则要写在mainview中，如下图。 在method中添加clickTab方法
clickTab(tab){
var name=JSON.stringify(tab.paneName).replace('"','').replace('"','')//对tab参数处理，以获得当前点击的标签页的路由
store.commit('CHANGE_TABS',name)//调用切换方法切换标签页
router.push(name)//路由跳转以实现切换界面
}
3.2 刷新方法 我们需要一个方法在更新完state中的参数，同步更新mainview中的参数。
refreshTabs(){
// console.log("refresh");
this.editableTabsValue=store.state.editableTabsValue;
this.editableTabs=store.state.editableTabs;
},
代码很简单，直接赋值就可以，重要的是需要在state数据更新时，同步更新mainview中数据，所以需要搞一个监听器，调用refreshTabs方法以实现同步更新数据。
3.3 监听以同步数据 在mainview的watch中，监听state，如有变化则同步更新数据，这样就实现了点击标签页后的实时切换。
watch:{
"$store.state":{
deep:true,
handler:function(){
this.refreshTabs();
}
},
3.4 标签页的关闭 在mainview的method中添加removeTab方法，这里我直接复制了elementUI中的removeTab方法。 这个方法可以实现，关闭一个标签页后，会自动打开旁边的标签页。
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
store.state.editableTabsValue=activeName;
store.state.editableTabs=tabs.filter(tab=>tab.name!==targetName);
router.push(activeName)
},
总结
好像没什么了，时间有点紧，写的有点乱，需要的同学凑合看吧，希望能有帮助。
文章来源
您阅读本篇文章共花了：
发表评论