vue?elementUi中的tabs標(biāo)簽頁使用教程
前言
詳細(xì)介紹如何添加Tabs標(biāo)簽頁，很簡單的東西，但感覺教程很少，剛剛研究好久才弄好，記錄下希望對需要者有幫助。
一、整體頁面布局與完成效果
整體界面(mainview.vue)布局如下圖：
代碼結(jié)構(gòu)
標(biāo)簽頁主要在mainview中編寫
//mainview.vue
<template>
<el-container>
<el-header>header頂部欄</el-header>
<el-container>
<el-aside>
aside側(cè)邊欄
<leftbar></leftbar>//leftbar.vue
</el-aside>
<el-main>main主界面
<el-tabs>標(biāo)簽頁
<el-tab-pane>
標(biāo)簽頁顯示區(qū)域
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
<template>
即在Main中添加Tabs標(biāo)簽頁，實(shí)現(xiàn)在側(cè)邊欄中點(diǎn)擊功能鍵后，在圖中紅色框部分出現(xiàn)標(biāo)簽，點(diǎn)擊可跳轉(zhuǎn)界面。
登陸默認(rèn)“首頁界面”開啟且不可關(guān)閉，其余界面可手動開啟，手動關(guān)閉。
完成效果如下圖：
二、代碼編寫
1.標(biāo)簽頁引入
標(biāo)簽頁代碼如下
<el-tabs class="tabs"
v-model="editableTabsValue"
type="border-card"
@tab-remove="removeTab"
@tab-click="clickTab">
<el-tab-pane class="tab-pane"
v-for="item in editableTabs"
:closable="item.close"
:key="item.name"
:label="item.title"
:name="item.name" >
{{item.content}}
<RouterView></RouterView>//標(biāo)簽頁界面路由顯示
</el-tab-pane>
</el-tabs>
2.標(biāo)簽頁參數(shù)設(shè)置
2.1 標(biāo)簽頁主要參數(shù)
標(biāo)簽頁的數(shù)據(jù)存放在vuex的store中，在store.state中添加兩個參數(shù)的定義，設(shè)置的初始數(shù)據(jù)為“首頁界面”的數(shù)據(jù)。
state: {
//當(dāng)前打開的界面路由，初始值為主頁的路由
editableTabsValue:'/mainview/index',
//存放當(dāng)前打開的標(biāo)簽頁的數(shù)組，初始時只有首頁
editableTabs:[{
title:'首頁',//標(biāo)簽頁名
name:'/mainview/index',//標(biāo)簽頁路由
close:false//該標(biāo)簽頁是否可關(guān)閉，這里是首頁標(biāo)簽頁不可被關(guān)閉
}]
},
2.2 打開和切換標(biāo)簽頁方法
然后在mutation中添加兩個方法，操作這兩個參數(shù)，以控制標(biāo)簽頁的打開和切換。
ADD_TABS:(state,tab)=>{//增加標(biāo)簽頁方法
//在editableTabs中查找此界面是否已打開，否進(jìn)入if
if(state.editableTabs.findIndex(e=>e.name===tab.path)===-1){
state.editableTabs.push({//添加當(dāng)前標(biāo)簽頁進(jìn)入editableTabs
title:tab.name,
name:tab.path,
close:true//使除了首頁標(biāo)簽頁外其他都可關(guān)閉
})
}
state.editableTabsValue=tab.path//添加標(biāo)簽頁后默認(rèn)打開
},
CHANGE_TABS:(state,name)=>{//切換標(biāo)簽頁方法
//將需打開標(biāo)簽頁路由賦予editableTabsvalue
state.editableTabsValue=name
},
2.3 mainview中添加數(shù)據(jù)
在mainview的data中添加并獲取state中的數(shù)據(jù)，注意引入ref
2.4 側(cè)邊欄相關(guān)設(shè)置
在leftbar.vue的data中添加參數(shù)submenuList,用于存放側(cè)邊導(dǎo)航欄欄位數(shù)據(jù)。
此處代碼為elementUI導(dǎo)航欄代碼，不做過多解釋，注意添加opentab方法。
2.5 標(biāo)簽頁的打開
opentab方法，點(diǎn)擊側(cè)邊欄欄位以打開標(biāo)簽頁，調(diào)用ADD_TABS方法。
注意：1、導(dǎo)入store 2、此方法寫在leftbar.vue中，也就是說只有點(diǎn)擊側(cè)邊欄才能打開標(biāo)簽頁。
側(cè)邊欄效果如下圖：
3.標(biāo)簽頁的切換和關(guān)閉
3.1切換標(biāo)簽頁方法
前面已經(jīng)在store的mutation中寫過打開（ADD_TABS）和切換(CHANGE_TABS)兩個方法了，opentab寫在側(cè)邊欄（leftbar.vue）中，調(diào)用了打開方法（ADD_TABS）以實(shí)現(xiàn)點(diǎn)擊側(cè)邊欄打開標(biāo)簽頁。
調(diào)用切換(CHANGE_TABS)的方法則要寫在mainview中，如下圖。
在method中添加clickTab方法
clickTab(tab){
var name=JSON.stringify(tab.paneName).replace('"','').replace('"','')//對tab參數(shù)處理，以獲得當(dāng)前點(diǎn)擊的標(biāo)簽頁的路由
store.commit('CHANGE_TABS',name)//調(diào)用切換方法切換標(biāo)簽頁
router.push(name)//路由跳轉(zhuǎn)以實(shí)現(xiàn)切換界面
}
3.2 刷新方法
我們需要一個方法在更新完state中的參數(shù)，同步更新mainview中的參數(shù)。
refreshTabs(){
// console.log("refresh");
this.editableTabsValue=store.state.editableTabsValue;
this.editableTabs=store.state.editableTabs;
},
代碼很簡單，直接賦值就可以，重要的是需要在state數(shù)據(jù)更新時，同步更新mainview中數(shù)據(jù)，所以需要搞一個監(jiān)聽器，調(diào)用refreshTabs方法以實(shí)現(xiàn)同步更新數(shù)據(jù)。
3.3 監(jiān)聽以同步數(shù)據(jù)
在mainview的watch中，監(jiān)聽state，如有變化則同步更新數(shù)據(jù)，這樣就實(shí)現(xiàn)了點(diǎn)擊標(biāo)簽頁后的實(shí)時切換。
watch:{
"$store.state":{
deep:true,
handler:function(){
this.refreshTabs();
}
},
3.4 標(biāo)簽頁的關(guān)閉
在mainview的method中添加removeTab方法，這里我直接復(fù)制了elementUI中的removeTab方法。
這個方法可以實(shí)現(xiàn)，關(guān)閉一個標(biāo)簽頁后，會自動打開旁邊的標(biāo)簽頁。
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)
},
總結(jié)
到此這篇關(guān)于vue elementUi中tabs標(biāo)簽頁使用的文章就介紹到這了,更多相關(guān)elementUi中tabs標(biāo)簽頁使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進(jìn)行限制
- vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問題解決辦法
- vue使用elementUI組件實(shí)現(xiàn)分頁效果
- Vue3項(xiàng)目中引入ElementUI并使用的示例詳解
- Vue?ElementUI在el-table中使用el-popover問題
- vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式
- Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- VUE-ElementUI?時間區(qū)間選擇器的使用
- Vue引入ElementUI并使用的詳細(xì)過程
相關(guān)文章
vue-quill-editor富文本編輯器超詳細(xì)入門使用步驟
vue中很多項(xiàng)目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下2022-08-08
表格Table實(shí)現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁)
這篇文章主要為大家介紹了表格Table實(shí)現(xiàn)前端全選所有功能,包括非當(dāng)前頁的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-02-02
這篇文章主要介紹了Vue+Koa2 打包后如何進(jìn)行線上部署，給大家分享了一些問題及解決方法,需要的朋友可以參考下2019-07-07
Vant是有贊前端團(tuán)隊(duì)開源的移動端組件庫,于2017年開源,已持續(xù)維護(hù)4年時間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
過濾器是一個通過輸入數(shù)據(jù)，能夠及時對數(shù)據(jù)進(jìn)行處理并返回一個數(shù)據(jù)結(jié)果的簡單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料，需要的朋友可以參考借鑒，下面來看看詳細(xì)的介紹。2017-06-06
這篇文章主要介紹了vue跳轉(zhuǎn)后不記錄歷史記錄的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
xss的攻擊方式是發(fā)生在用戶使用瀏覽器時候運(yùn)行,通過嵌入腳本竊取用戶信息,本文主要介紹了vue如何防范XSS攻擊的一些方法,感興趣的可以了解一下2024-04-04
這篇文章主要介紹了在vue中axios設(shè)置timeout超時的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue flex 布局實(shí)現(xiàn)div均分自動換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue3+vue-router+vite實(shí)現(xiàn)動態(tài)路由的全過程
動態(tài)路由是根據(jù)不同情況實(shí)時變化的路由,在權(quán)限管理系統(tǒng)中,動態(tài)路由常用于根據(jù)用戶角色分配不同的菜單和功能,這篇文章主要介紹了vue3+vue-router+vite實(shí)現(xiàn)動態(tài)路由的相關(guān)資料,需要的朋友可以參考下2024-10-10