【Web前端開發】Vue+AJAX+Bootstrap-table導致失效問題

出現的問題

最近在做一個後臺管理系統，需要用到分頁的功能，在百度了資料後，找到了Bootstrap-table框架實現分頁功能。但在實際使用中卻遇到了Bug，如下：
正常顯示效果應如下：

此時的JS內容如下：

<script type="text/javascript">
  new Vue({
  el: '#fresh-table',
  data: {
    infos:[
    { 
      "id":2,
      "studentName":"李四",
      "phoneNumber":"13800123439"
    },
    {
      "id":5,
      "studentName":"喬布斯",
      "phoneNumber":"13800138004"
    },
    {
      "id":6,
      "studentName":"雷軍",
      "phoneNumber":"13800138005"
    },
    {
      "id":10,
      "studentName":"張三四",
      "phoneNumber":"15767087123"
    },
    {
      "id":13,
      "studentName":"張四",
      "phoneNumber":"13800138033"
    },
    {
      "id":16,
      "studentName":"張三",
      "phoneNumber":"13800138006"
    },
    {
      "id":17,
      "studentName":"張三",
      "phoneNumber":"13800138008"
    }
    ....
})
</script>

但當我使用AJAX從服務器取數據後再顯示時就出現異常了，分頁效果消失了：

底部內容消失了，且此時表格顯示“No matching records found”，沒有找到表格數據…
此時的JS內容如下：

<script>
    var info = new Vue({
            el:"#fresh-table",
            data:{
                infos:""
            },
            methods:{
                getUserData:function(){
                 $.get('服務器地址', function(res) {
                     info.infos = res.data;   
                  }); 
                }
            }
        });
    info.getUserData();
</script>

解決思路

一開始我以爲是Vue.js和Bootstrap-table不兼容，但是在經過上面第一個JS的測試後，我發現不是的。
在之前看到“No matching records found ”的時候我沒明白是幹什麼的，就在代碼裏把它消去了，正是因爲這個愚蠢的決定導致我花了幾個小時都沒解決Bug!!因爲在重新恢復“No matching records found ”之前我認爲是Bootstrap-table.js沒有成功執行才導致沒有顯示分頁效果，但是其實這個“No matching records found ”就是來自Bootstrap-table內的，且我查看源碼的時候發現：底部的顯示全都被隱藏了：


display全爲none，所以纔沒有顯示出來。而正常情況的源碼應該是下面這樣的：

在閱讀了Bootstrap-table.js源碼後發現是因爲JS裏並沒有獲取到data（即沒有獲取表格的內容）。也就是說在還沒獲取數據之前就已經執行了Bootstrap.js。所以我嘗試了使用AJAX同步執行，仍然不起作用。
在經過了很多嘗試後，還是失敗。最後我選擇了個比較笨的方法。在前面的分析中發現其實在還沒獲取AJAX返回的值之前，bootstrap-table就已經執行完並渲染了，而最後我們看到的結果是通過Vue顯示的 而不是通過bootstrap-table。我檢查了bootstrap-table.js的源碼，發現是data在起作用，所以我直接在ajax成功獲得數據後把值給了bootstrap-table，而不是通過vue去賦值 就是直接傳值給Bootstrap-table，而不通過Vue。代碼如下：

$.get('服務器地址', function(res) {
    $('#fresh-table').bootstrapTable({
         toolbar: ".toolbar",
         data:res.data, // 直接傳值給Data
         formatShowingRows: function(pageFrom, pageTo, totalRows){
          //do nothing here, we don't want to show the text "showing x of y from..." 
          }
      });
    }); 

要注意的是，Data接受的JSON數據裏鍵名和表單裏th標籤的data-field屬性是對應的，也就是說

   {
      "id":16,
      "studentName":"張三",
      "phoneNumber":"13800138006"
   }

 對應

  <th data-field="id">用戶編號</th>
  <th data-field="studentName">用戶暱稱</th>
  <th data-field="phoneNumber">手機號</th>

這樣寫才能在相對應的列顯示正確的內容。這是由Bootstarp-table.js源碼規定的，有興趣的小夥伴可以去改改源碼~~