vue-cli-element-ui-table-表格分页功能切换数据后@current-change失效的解决方案

前沿

---

最近在开发过程中，遇到了切换了表格中的数据后，分页的功能失效，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;
          });