上一篇寫了一下table，然後要寫什麼呢？當然是tab了。動態建立一個tab，裡面放一個table，這樣一個後臺管理的基本功能（之一）就出來了。
好吧，這裡其實只是試試水，感受一下vue的資料驅動可以怎麼玩，通過一個個例項學習一下vue的各個知識點。這裡要看看方法和css如何設定。
一、目標
1、 可以動態建立tab。
2、 可以切換（廢話）、可以關閉tab。
3、 Css的設定。
4、 方法的處理方式。
5、 效果圖
二、思路
應該有好多種方式可以實現，這裡先試一個，其他的以後再說。
還是資料驅動，那麼就建立一個大的資料包，把tab資訊和table資訊都放進去，然後繫結就好了。似乎不是太難的樣子。Emmmmmm大概是吧。
Tab切換，暫時使用css的方式來控制。
關閉tab，就是幹掉對應的資料。
三、設計與編碼
1. 資料包
var tab = new Vue({ el: '#tab', data: { tabNumber: 1, //標籤數量，這個是臨時的，便於自動重新繫結 currentTabId: 1, //當前啟用的tab的id beforeTabId: 1, //上一個被啟用的tab的id tabs: { tab1: { //可以有多個標籤，這裡先預設一個tab id: "1", //標籤識別標示 title: "我的桌面", isShow:true, //是否顯示 message: '桌面', orderBy: [], //可以控制欄位的先後順序，想調整列的先後順序，改這個陣列就行，可以做個性化設定 tableTh: {}, //表頭的描述資訊 dataList: [] //資料包，欄位名作為關鍵字，便於列的調整先後順序 } } }, methods: { tabClick: function (id) { //切換tab //alert("切換tab" + id); //隱藏當前的tab var oldId = tab.currentTabId; //記錄切換前tab的id tab.beforeTabId = oldId; tab.tabs["tab" + oldId].isShow = false; //隱藏切換前的tab tab.currentTabId = id; //記錄切換後的id tab.tabs["tab" + id].isShow = true; //顯示切換後的tab }, closeTab: function (id) { if (id === "1") { alert("這是桌面，建議不要關閉哦：）"); return; } delete tab.tabs["tab" + id]; //這種方式不會被vue監控到，所以不會觸發檢視的重新整理 tab.tabNumber = tab.tabNumber - 1; //這樣子湊合一下。觸發檢視的重新整理 //設定“啟用”狀態 var oldId = tab.beforeTabId; //上一個啟用tab var nowId = tab.currentTabId; //現在啟用tab if (nowId === id) { //關掉的是啟用tab，需要設定上一個tab為啟用狀態 tab.currentTabId = oldId; tab.tabs["tab" + oldId].isShow = true; //這麼寫好像可以觸發檢視的重新整理 tab.beforeTabId = 1; } else if (oldId === id) { //關閉的是上一個啟用tab，修改前一個tab的id tab.beforeTabId = 1; }else { //需要強制修改一下，否則不會重新整理，emmm，好吧還是沒自動重新整理 tab.currentTabId = nowId; } } } });
methods 這個也是一個保留字（關鍵字），就是放方法的。裡面可以有多個方法，方法名稱和標籤裡的v-on:XXXX=’00000’ 對應。
這裡寫了兩個方法，一個是切換tab的，一個是關閉tab的。
切換tab：按照資料驅動檢視的思路，在方法裡面改變資料的isShow 屬性值，然後通過模板的設定來實現切換效果。
關閉tab：幹掉對應的資料即可，只是實現的時候遇到點小問題，delele的方式不能被監控，到時檢視不能及時更新，所以加了一個tab數量的屬性，關掉一個tab，數量-1，這樣資料變化就可以被監控到了，然後一起重新繫結。
2. 模板
<div id="tab"> <!--tab標籤--> <ul id="ulTab" class="tabs left"> <li v-for="t in tabs" v-bind:class="{'selectTag':t.isShow}"> <a v-on:click="tabClick(t.id)" href="javascript:void(0)"> {{t.title}} <em class="arrup" v-on:click.stop="closeTab(t.id)">x</em> </a> </li> </ul> <div v-for="t in tabs" v-show="t.isShow"> {{ t.message }}{{tabNumber}} <table class="table_default1" style="" v-show="t.message!=='桌面'"> <tr> <th>序號</th> <th v-for="key in t.orderBy"> {{t.tableTh[key].title}} </th> </tr> <tr v-for="(tr,i) in t.dataList"> <td>{{i+1}}</td> <td v-for="index in t.orderBy" v-bind:align="t.tableTh[index].align"> {{tr[index]}} </td> </tr> </table> </div> </div>
切換tab
用v-show的方法來控制div是否顯示。
v-show是通過修改style的屬性來實現的。
用v-bind:class="{'selectTag':t.isShow}" 的方式來實現tab的啟用效果。
v-bind:class 可以繫結css名稱。因為css名稱總是要被換來換去的，所以vue就很貼心的提供了這種if true 才設定的方式，冒號後面為真，才會設定設個css名稱，這樣資料驅動的時候就方便多了。
四、執行效果
除錯了半天，好吧上年紀了，思維不夠敏捷，這麼點邏輯問題就卡住了，哎。
不過最後還是除錯成功了。
五、總結
這個有一個明顯的問題，這個資料包是不是有點大，建立的tab越多，資料包就越大，有沒有效能問題？會不會卡？
另外這還只是table，如果增加了按鈕、查詢條件、分頁控制元件，這個資料包的結構要變成多複雜呀？挖坑也不帶這麼挖的呀。
那麼怎麼辦呢？下次再說。（好吧，現在還沒想好，似乎要寫元件，或者要用到插槽）
下集預告：會做一個tree，增加訪問後端獲得資料，然後繫結數的方法。