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)簽識(shí)別標(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;
        }
       }
    }
});

<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}}&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" v-show="t.message!=='桌面'">
      <tr>
        <th>序號(hào)</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>