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