上一篇寫了一下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，增加訪問后端獲得數據，然后綁定數的方法。