从后端到前端之Vue（二）写个tab试试水

 

　　上一篇写了一下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}}&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>

 

切换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，增加访问后端获得数据，然后绑定数的方法。