前沿

最近在开发过程中，遇到了切换了表格中的数据后，分页的功能失效，current-change方法失效，折腾了好久，最后终于解决了，记录下来，方便后续学习，也发现形成一个思维的问题，不能老是闷头敲代码，要多交流。好了，不废话了，切入正题。

解决方案就是销毁分页组件在重建这样就会完全重新渲染了分页组件。

这里采用的是v-if的重建解决方案

      <div class='paginationBox'
             v-if="paginationBoxReflow">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>

在你切换数据之前销毁并且重建，就可以了。

      this.paginationBoxReflow = false;
          this.$nextTick(() => {
            this.paginationBoxReflow = true;
          });