vue element table分页, 注意问题汇总

vue element table分页实现：

.......

其中主要借助 tableData的数组分割来实现分页。currentPage是当前页数，pagesize是每页展示的条数 本项目设置为一页10条数据

 

关于分页遇到的bug如下：

（一）：查询时后端接口返回数据，但是表格不展示

背景：

刚开始打开dialog之后，先调接口渲染一些数据，点击下方页数，切换页面，当切换到第二页的时候，随机取一个手机号码，放到上面手机号搜索框里面，与商圈联合查询的时候，点击查询。

结果：后端返回一条数据，但是表格不显示。。。。。

bug排查：

因为table的数据是通过 tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize) 来显示的，后端有返回，则 tableData有值，通过console.log( (currentPage - 1) * pagesize) ,console.log( currentPage * pagesize)发现！当点击下方页数切换页面时，currentPage变化了，点击第二页 此时currentPage = 2，所以虽然后端返回了1条数据，但是表格应该展示的是tableData.slice(10, 20), 当然取不到，所以就为空了……

bug解决：

当点击查询按钮时，数据返回后，把 currentPage 设置值为1，即查询后的结果都从 tableData.slice(0, 10)开始展示，bug ?

（二）： 单选按钮默认问题

背景：操作栏的选择按钮，比如选择了第一页的最后一条，切换到第二页的时候，第二页的最后一条数据也默认选中了

bug排查：index赋值不对，点击了第一页的最后一个，index值为9 ，即9是被默认选中的，切换到第二页的时候，第二页的最后一条数据，index也为9，所以也被选中了。。。

bug解决：每条数据的index按照在整个tableData中去算，利用currentPage 和 pagesize，代码如下：原先：label='scope.$index'

选择


getTemplateRow (value, index) {
      this.result = value
      const currentIndex = index + (this.currentPage - 1) * this.pagesize
      this.templateRadio = currentIndex //单选按钮默认选中 
    },

templateRadio是radio默认选项。这样就?了～