動態(tài)創(chuàng)建一個tab，里面放一個table，這樣一個后臺管理的基本功能（之一）就出來了。
目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網站建設、域名、虛擬空間、網站托管、服務器租用、企業(yè)網站設計、寧夏網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
好吧，這里其實只是試試水，感受一下vue的數(shù)據驅動可以怎么玩，通過一個個實例學習一下vue的各個知識點。這里要看看方法和css如何設置。
一、目標
1、 可以動態(tài)創(chuàng)建tab。
2、 可以切換（廢話）、可以關閉tab。
3、 Css的設置。
4、 方法的處理方式。
5、 效果圖
二、思路
應該有好多種方式可以實現(xiàn)，這里先試一個，其他的以后再說。
還是數(shù)據驅動，那么就建立一個大的數(shù)據包，把tab信息和table信息都放進去，然后綁定就好了。似乎不是太難的樣子。Emmmmmm大概是吧。
Tab切換，暫時使用css的方式來控制。
關閉tab，就是干掉對應的數(shù)據。
三、設計與編碼 1. 數(shù)據包
重慶分公司
重慶分公司
var tab = new Vue({
el: '#tab',
data: {
tabNumber: 1, //標簽數(shù)量，這個是臨時的，便于自動重新綁定
currentTabId: 1, //當前激活的tab的id
beforeTabId: 1, //上一個被激活的tab的id
tabs: {
tab1: { //可以有多個標簽，這里先默認一個tab
id: "1", //標簽識別標示
title: "我的桌面",
isShow:true, //是否顯示
message: '桌面',
orderBy: [], //可以控制字段的先后順序，想調整列的先后順序，改這個數(shù)組就行，可以做個性化設置
tableTh: {}, //表頭的描述信息
dataList: [] //數(shù)據包，字段名作為關鍵字，便于列的調整先后順序
}
}
},
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監(jiān)控到，所以不會觸發(fā)視圖的刷新
tab.tabNumber = tab.tabNumber - 1; //這樣子湊合一下。觸發(fā)視圖的刷新
//設置“激活”狀態(tài)
var oldId = tab.beforeTabId; //上一個激活tab
var nowId = tab.currentTabId; //現(xiàn)在激活tab
if (nowId === id) {
//關掉的是激活tab，需要設置上一個tab為激活狀態(tài)
tab.currentTabId = oldId;
tab.tabs["tab" + oldId].isShow = true; //這么寫好像可以觸發(fā)視圖的刷新
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：按照數(shù)據驅動視圖的思路，在方法里面改變數(shù)據的isShow 屬性值，然后通過模板的設置來實現(xiàn)切換效果。
關閉tab：干掉對應的數(shù)據即可，只是實現(xiàn)的時候遇到點小問題，delele的方式不能被監(jiān)控，到時視圖不能及時更新，所以加了一個tab數(shù)量的屬性，關掉一個tab，數(shù)量-1，這樣數(shù)據變化就可以被監(jiān)控到了，然后一起重新綁定。
2. 模板
{{ t.message }}{{tabNumber}}
序號 {{t.tableTh[key].title}} {{i+1}} {{tr[index]}}
切換tab
用v-show的方法來控制div是否顯示。
v-show是通過修改style的屬性來實現(xiàn)的。
用v-bind:class="{'selectTag':t.isShow}" 的方式來實現(xiàn)tab的激活效果。
v-bind:class 可以綁定css名稱。因為css名稱總是要被換來換去的，所以vue就很貼心的提供了這種if true 才設置的方式，冒號后面為真，才會設置設個css名稱，這樣數(shù)據驅動的時候就方便多了。
四、運行效果
調試了半天，好吧上年紀了，思維不夠敏捷，這么點邏輯問題就卡住了，哎。
不過最后還是調試成功了。
五、總結
這個有一個明顯的問題，這個數(shù)據包是不是有點大，創(chuàng)建的tab越多，數(shù)據包就越大，有沒有性能問題？會不會卡？
另外這還只是table，如果增加了按鈕、查詢條件、分頁控件，這個數(shù)據包的結構要變成多復雜呀？挖坑也不帶這么挖的呀。
那么怎么辦呢？下次再說。（好吧，現(xiàn)在還沒想好，似乎要寫組件，或者要用到插槽）感謝大家對創(chuàng)新互聯(lián)的支持。
