【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源码规定的，有兴趣的小伙伴可以去改改源码~~