【Web前端开发】Vue+AJAX+Bootstrap-table导致失效问题

心已赠人 2021-09-23 02:12 452阅读 0赞

### 出现的问题 ###

最近在做一个后台管理系统，需要用到分页的功能，在百度了资料后，找到了Bootstrap-table框架实现分页功能。但在实际使用中却遇到了Bug，如下：  
正常显示效果应如下：  
![这里写图片描述][SouthEast]

此时的JS内容如下：

但当我使用AJAX从服务器取数据后再显示时就出现异常了，分页效果消失了：  
![这里写图片描述][SouthEast 1]

底部内容消失了，且此时表格显示“No matching records found”，没有找到表格数据…  
此时的JS内容如下：

### 解决思路 ###

一开始我以为是Vue.js和Bootstrap-table不兼容，但是在经过上面第一个JS的测试后，我发现不是的。  
在之前看到“No matching records found ”的时候我没明白是干什么的，就在代码里把它消去了，正是因为这个愚蠢的决定导致我花了几个小时都没解决Bug!!因为在重新恢复“No matching records found ”之前我认为是Bootstrap-table.js没有成功执行才导致没有显示分页效果，但是其实这个“No matching records found ”就是来自Bootstrap-table内的，且我查看源码的时候发现：底部的显示全都被隐藏了：  
  
![这里写图片描述][SouthEast 2]  
display全为none，所以才没有显示出来。而正常情况的源码应该是下面这样的：  
![这里写图片描述][SouthEast 3]

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

[SouthEast]: /images/20210923/5768a0a713f1473e844f70abf0cdc1a9.png
[SouthEast 1]: /images/20210923/7780a5d76fe5427e91220df210e5c1c5.png
[SouthEast 2]: /images/20210923/677eb3701dfe4384b2da0461ab1cc09f.png
[SouthEast 3]: /images/20210923/2538db293d294138a7cd3973026adf68.png