vue+element 分页current-page设置页码失效问题

「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」

问题描述：

element-UI 分页器Bug，切换页面展示数量，页码刷新重置，原来页码高亮问题

1.element官方文档

Element-UI提供了分页器的两个方法，handleSizeChange和handleCurrentChange，然而在实际使用中，却发现再切换页面展示数量的时候，会出现一些BUG， 页面刷新了，高亮页码却还是上次选择的页面。可以用以下方法解决； 翻看element文档中发现有current-page，当前页数，支持 .sync 修饰符,加上.sync即可解决这个bug

2.问题出现在项目页面分页查看之后

在你的项目页面，你点击了分页按钮查看了后面页面的数据，然后变更了查询条件，查询了新的数据时，分页显示器上面还停留在上一次翻页的记录上面，而没有重置到第一页，

3.解决方案

1.最简单粗暴的手法，就是利用DOM渲染，刷新整个组件，这样，就模拟恢复到第一页的状态

根据v-if变量属性的变化控制组件的重新渲染，在查询条件变更时，表格数据更新了，组件变量页跟着一起更新，就可以实现页码的混淆 ，

<el-pagination
    //根据属性变化刷新组件
    v-if="settings.isPagination"
    background
    style="text-align:right;padding:6px 0"
    @size-change="e => handleClick('pageSize', e)"
    @current-change="e => handleClick('currentPage', e)"
    //当前页数
    :current-page="currentPage"
    //当前页展示条数
    :page-sizes="[20, 50, 100, 200]"
    :page-size="20"
    layout="total, sizes, prev, pager, next, jumper"
    :total="settings.total"
></el-pagination>

2.利用官方的APIcurrent-page.sync

这个方案网友们已经验证了，个人觉得还是第一个靠谱一些

<el-pagination
    background
    style="text-align:right;padding:6px 0"
    @size-change="e => handleClick('pageSize', e)"
    @current-change="e => handleClick('currentPage', e)"
    //当前页数用修饰符控制
    :current-page.sync="currentPage"
    //当前页展示条数
    :page-sizes="[20, 50, 100, 200]"
    :page-size="20"
    layout="total, sizes, prev, pager, next, jumper"
    :total="settings.total"
></el-pagination>

elementUI中el-pagination组件下的值是异步加载的，使得对于属性值的改变通常要在函数中去实现。
因此el-pagination组件对:current-page属性支持.sync修饰符，用于同步current-page的值