從後端到前端之Vue（二）寫個tab試試水

時間 2019-11-05

標籤後端前端 vue tab 試試简体版

原文原文鏈接

　　上一篇寫了一下table，而後要寫什麼呢？固然是tab了。動態建立一個tab，裏面放一個table，這樣一個後臺管理的基本功能（之一）就出來了。javascript

　　好吧，這裏其實只是試試水，感覺一下vue的數據驅動能夠怎麼玩，經過一個個實例學習一下vue的各個知識點。這裏要看看方法和css如何設置。css

1、目標

一、能夠動態建立tab。vue

二、能夠切換（廢話）、能夠關閉tab。java

三、 Css的設置。後端

四、方法的處理方式。數組

五、效果圖性能

2、思路

　　應該有好多種方式能夠實現，這裏先試一個，其餘的之後再說。學習

　　仍是數據驅動，那麼就創建一個大的數據包，把tab信息和table信息都放進去，而後綁定就行了。彷佛不是太難的樣子。Emmmmmm大概是吧。編碼

　　Tab切換，暫時使用css的方式來控制。spa

　　關閉tab，就是幹掉對應的數據。

3、設計與編碼

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}}&nbsp;
                <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>