element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.element官方文档

element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化,vue,element-ui,bug,前端,vue.js

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的值文章来源地址https://www.toymoban.com/news/detail-598221.html

到了这里，关于element-UI 分页器Bug，切换页码，页码改变但是页码高亮未变化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！