使用element-ui的el-table和el-pagination标签实现表格分页功能以及解决遇到的暂无数据的bug

博主需要在项目中需要使用el-table和el-pagination标签实现表格分页功能，方法如下：

1. el-table标签的data属性是显示的数据，绑定为showTable计算属性

<el-table
      :data="showTable"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      highlight-current-row
      height="400"
      style="border:1px solid #dfe6ec;"
      v-loading="loading"
    >
      <el-table-column 
      type="index" 
      label="序号" 
      width="60" 
      align="center"
      ></el-table-column>
      ...
</el-table>

2. el-pagination标签current-change事件会在当前页改变时被触发，绑定为handleCurrentChange方法，page-size属性绑定的是每页显示条目个数

<el-col :span="24" class="toolbar" style="text-align:center">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pagesize"
        :total="this.filterAutomobileInfs.length"
      ></el-pagination>
</el-col>

3. 设置初始化数据并编写事件触发的方法

export default {
  data() {
    return {
      ...
      pagesize: 10, //设置每页显示条目个数为10
      currentPage: 1, //设置当前页默认为1
      filterAutomobileInfs: [], //分页前的数据
      ...
    }
  },
  computed: {
  //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterAutomobileInfs.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    }
  },
  methods: {
    //设置当前页为点击页
   	handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    }
  }
}

这样就通过改变表格中绑定的data数据，利用vue数据驱动这一特点实现了表格分页功能。效果如下：

1. 第1页，显示的数据有10条，分页组件显示共有15条数据
   
2. 翻到第2页，显示了剩下5条数据
   

博主本以为功能已经成功实现，但是理想很丰满，现实很骨感。博主在测试过程中还是发现了一个有趣的bug：功能有时好使有时不好使(不好使的情况是查询条件无误的时候查询后却没有数据)。遇到这种情况我的表情是这样的：╯﹏╰。根据以往经验，博主首先怀疑是某处的js异步导致的，但是几经折腾却没有什么进展。
于是，博主加强了测试力度，最终得出结论：只有在翻到从第2页开始的之后的页面查询时才会出现无数据的情况。这回答案应该比较明显了，应该是跟页数有关。又考虑到vue的数据驱动特性，终于明白了问题所在：
我们点击第2页之后的页数时会改变当前页数，这个时候点击查询，系统根据查询条件筛选符合条件的数组赋值给定义的filterAutomobileInfs数据项，计算属性通过slice方法筛选表格应显示的数据，而此时currentPage还是改变后的当前页数，所以导致slice方法筛选的数据索引不正确，出现无数据或数据异常的问题。

知道问题原因就好办多了，只需在查询时重新设置当前页数为1就好了，如下：

methods: {
    //查询方法
    searchAutomobile() {
      //currentPage赋值为1
      this.currentPage = 1;
      //筛选方法
      this.filterAutomobile();
    }
    ...
}

这次的问题给我带来的启发很多，我们在遇到问题时一定要多做测试探究问题出现的条件和环境，并且多考虑当前技术的原理，希望借此篇博客与大家共勉吧！