前沿

最近在开发过程中，遇到了切换了表格中的数据后，分页的功能失效，

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;
});

• 点赞
• 收藏
• 分享
• 文章举报

郝峰Vip 发布了65 篇原创文章 · 获赞 0 · 访问量 471 私信 关注