vue?elementUi中的tabs標簽頁如何使用

本文小編為大家詳細介紹“vue elementUi中的tabs標簽頁如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue elementUi中的tabs標簽頁如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、整體頁面布局與完成效果

整體界面(mainview.vue)布局如下圖：

代碼結構

標簽頁主要在mainview中編寫

//mainview.vue
<template>
<el-container>
        <el-header>header頂部欄</el-header>
        <el-container>
            <el-aside>
            aside側邊欄
            <leftbar></leftbar>//leftbar.vue
            </el-aside>
            <el-main>main主界面
            		<el-tabs>標簽頁
            			<el-tab-pane>
            				標簽頁顯示區域
            			</el-tab-pane>
            		</el-tabs>
            </el-main>
        </el-container>
    </el-container>
 <template>

即在Main中添加Tabs標簽頁，實現在側邊欄中點擊功能鍵后，在圖中紅色框部分出現標簽，點擊可跳轉界面。

登陸默認“首頁界面”開啟且不可關閉，其余界面可手動開啟，手動關閉。
完成效果如下圖：

二、代碼編寫

1.標簽頁引入

標簽頁代碼如下

	<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>//標簽頁界面路由顯示
            </el-tab-pane>
     </el-tabs>

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)
    },

讀到這里，這篇“vue elementUi中的tabs標簽頁如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。