vue?elementUi中的tabs標(biāo)簽頁使用教程
前言
詳細(xì)介紹如何添加Tabs標(biāo)簽頁,很簡(jiǎn)單的東西,但感覺教程很少,剛剛研究好久才弄好,記錄下希望對(duì)需要者有幫助。
一、整體頁面布局與完成效果
整體界面(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)閉,其余界面可手動(dòng)開啟,手動(dòng)關(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中添加兩個(gè)參數(shù)的定義,設(shè)置的初始數(shù)據(jù)為“首頁界面”的數(shù)據(jù)。
state: { //當(dāng)前打開的界面路由,初始值為主頁的路由 editableTabsValue:'/mainview/index', //存放當(dāng)前打開的標(biāo)簽頁的數(shù)組,初始時(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中添加兩個(gè)方法,操作這兩個(gè)參數(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)兩個(gè)方法了,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('"','')//對(duì)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 刷新方法
我們需要一個(gè)方法在更新完state中的參數(shù),同步更新mainview中的參數(shù)。
refreshTabs(){ // console.log("refresh"); this.editableTabsValue=store.state.editableTabsValue; this.editableTabs=store.state.editableTabs; },
代碼很簡(jiǎn)單,直接賦值就可以,重要的是需要在state數(shù)據(jù)更新時(shí),同步更新mainview中數(shù)據(jù),所以需要搞一個(gè)監(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í)時(shí)切換。
watch:{ "$store.state":{ deep:true, handler:function(){ this.refreshTabs(); } },
3.4 標(biāo)簽頁的關(guān)閉
在mainview的method中添加removeTab方法,這里我直接復(fù)制了elementUI中的removeTab方法。
這個(gè)方法可以實(shí)現(xiàn),關(guān)閉一個(gè)標(biāo)簽頁后,會(huì)自動(dòng)打開旁邊的標(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue?使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類型大小同名等進(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動(dòng)態(tài)修改table單元格背景顏色或文本顏色
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- VUE-ElementUI?時(shí)間區(qū)間選擇器的使用
- Vue引入ElementUI并使用的詳細(xì)過程
相關(guān)文章
有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存,在組件化開發(fā)模式下,我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件,然后按照合理的方式組織起來,達(dá)到預(yù)期效果,下面來看看文章的詳細(xì)內(nèi)容2021-11-11vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決
這篇文章主要介紹了vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-06-06vue3通過組合鍵實(shí)現(xiàn)換行操作的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何通過組合鍵,例如command+Enter、shift+Enter、alt + Enter,實(shí)現(xiàn)換行操作,感興趣的可以了解下2024-03-03vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
這篇文章主要為大家介紹了Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06深入探究Vue2響應(yīng)式原理的實(shí)現(xiàn)及存在的缺陷
Vue的響應(yīng)式數(shù)據(jù)機(jī)制是其核心特性之一,它能夠自動(dòng)追蹤數(shù)據(jù)的變化,并實(shí)時(shí)更新相關(guān)的視圖,然而,Vue2中的響應(yīng)式數(shù)據(jù)機(jī)制并非完美無缺,本文將探討Vue2響應(yīng)式原理及其存在的缺陷2023-08-08基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-10-10