動(dòng)態(tài)創(chuàng)建一個(gè)tab，里面放一個(gè)table，這樣一個(gè)后臺管理的基本功能（之一）就出來了。
好吧，這里其實(shí)只是試試水，感受一下vue的數(shù)據(jù)驅(qū)動(dòng)可以怎么玩，通過一個(gè)個(gè)實(shí)例學(xué)習(xí)一下vue的各個(gè)知識點(diǎn)。這里要看看方法和css如何設(shè)置。
一、目標(biāo)
1、 可以動(dòng)態(tài)創(chuàng)建tab。
2、 可以切換（廢話）、可以關(guān)閉tab。
3、 Css的設(shè)置。
4、 方法的處理方式。
5、 效果圖
二、思路
應(yīng)該有好多種方式可以實(shí)現(xiàn)，這里先試一個(gè)，其他的以后再說。
還是數(shù)據(jù)驅(qū)動(dòng)，那么就建立一個(gè)大的數(shù)據(jù)包，把tab信息和table信息都放進(jìn)去，然后綁定就好了。似乎不是太難的樣子。Emmmmmm大概是吧。
Tab切換，暫時(shí)使用css的方式來控制。
關(guān)閉tab，就是干掉對應(yīng)的數(shù)據(jù)。
三、設(shè)計(jì)與編碼 1. 數(shù)據(jù)包
var tab = new Vue({ el: '#tab', data: { tabNumber: 1, //標(biāo)簽數(shù)量，這個(gè)是臨時(shí)的，便于自動(dòng)重新綁定 currentTabId: 1, //當(dāng)前激活的tab的id beforeTabId: 1, //上一個(gè)被激活的tab的id tabs: { tab1: { //可以有多個(gè)標(biāo)簽，這里先默認(rèn)一個(gè)tab id: "1", //標(biāo)簽識別標(biāo)示 title: "我的桌面", isShow:true, //是否顯示 message: '桌面', orderBy: [], //可以控制字段的先后順序，想調(diào)整列的先后順序，改這個(gè)數(shù)組就行，可以做個(gè)性化設(shè)置 tableTh: {}, //表頭的描述信息 dataList: [] //數(shù)據(jù)包，字段名作為關(guān)鍵字，便于列的調(diào)整先后順序 } } }, methods: { tabClick: function (id) { //切換tab //alert("切換tab" + id); //隱藏當(dāng)前的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("這是桌面，建議不要關(guān)閉哦：）"); return; } delete tab.tabs["tab" + id]; //這種方式不會(huì)被vue監(jiān)控到，所以不會(huì)觸發(fā)視圖的刷新 tab.tabNumber = tab.tabNumber - 1; //這樣子湊合一下。觸發(fā)視圖的刷新 //設(shè)置“激活”狀態(tài) var oldId = tab.beforeTabId; //上一個(gè)激活tab var nowId = tab.currentTabId; //現(xiàn)在激活tab if (nowId === id) { //關(guān)掉的是激活tab，需要設(shè)置上一個(gè)tab為激活狀態(tài) tab.currentTabId = oldId; tab.tabs["tab" + oldId].isShow = true; //這么寫好像可以觸發(fā)視圖的刷新 tab.beforeTabId = 1; } else if (oldId === id) { //關(guān)閉的是上一個(gè)激活tab，修改前一個(gè)tab的id tab.beforeTabId = 1; }else { //需要強(qiáng)制修改一下，否則不會(huì)刷新，emmm，好吧還是沒自動(dòng)刷新 tab.currentTabId = nowId; } } }});methods 這個(gè)也是一個(gè)保留字（關(guān)鍵字），就是放方法的。里面可以有多個(gè)方法，方法名稱和標(biāo)簽里的v-on:XXXX='00000' 對應(yīng)。
這里寫了兩個(gè)方法，一個(gè)是切換tab的，一個(gè)是關(guān)閉tab的。
切換tab：按照數(shù)據(jù)驅(qū)動(dòng)視圖的思路，在方法里面改變數(shù)據(jù)的isShow 屬性值，然后通過模板的設(shè)置來實(shí)現(xiàn)切換效果。
關(guān)閉tab：干掉對應(yīng)的數(shù)據(jù)即可，只是實(shí)現(xiàn)的時(shí)候遇到點(diǎn)小問題，delele的方式不能被監(jiān)控，到時(shí)視圖不能及時(shí)更新，所以加了一個(gè)tab數(shù)量的屬性，關(guān)掉一個(gè)tab，數(shù)量-1，這樣數(shù)據(jù)變化就可以被監(jiān)控到了，然后一起重新綁定。
2. 模板
<div> <!--tab標(biāo)簽--> <ul 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)" rel="external nofollow" > {{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" 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的屬性來實(shí)現(xiàn)的。
用v-bind:class="{'selectTag':t.isShow}" 的方式來實(shí)現(xiàn)tab的激活效果。
v-bind:class 可以綁定css名稱。因?yàn)閏ss名稱總是要被換來換去的，所以vue就很貼心的提供了這種if true 才設(shè)置的方式，冒號后面為真，才會(huì)設(shè)置設(shè)個(gè)css名稱，這樣數(shù)據(jù)驅(qū)動(dòng)的時(shí)候就方便多了。
四、運(yùn)行效果
調(diào)試了半天，好吧上年紀(jì)了，思維不夠敏捷，這么點(diǎn)邏輯問題就卡住了，哎。
不過最后還是調(diào)試成功了。
五、總結(jié)
這個(gè)有一個(gè)明顯的問題，這個(gè)數(shù)據(jù)包是不是有點(diǎn)大，創(chuàng)建的tab越多，數(shù)據(jù)包就越大，有沒有性能問題？會(huì)不會(huì)卡？
另外這還只是table，如果增加了按鈕、查詢條件、分頁控件，這個(gè)數(shù)據(jù)包的結(jié)構(gòu)要變成多復(fù)雜呀？挖坑也不帶這么挖的呀。
那么怎么辦呢？下次再說。（好吧，現(xiàn)在還沒想好，似乎要寫組件，或者要用到插槽）感謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
