Element-ui Vue 分页器,分页值更新后,UI未显示
Posted mr_raptor
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-ui Vue 分页器,分页值更新后,UI未显示相关的知识,希望对你有一定的参考价值。
原代码:
<el-pagination background
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@current-change="currentChange"
></el-pagination>
当currentPage更新成5后,下面的分页指示器未同步更新,修改成下面的形式即可同步更新。
<el-pagination
background
v-if="total != 0"
layout="prev, pager, next"
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
@current-change="currentChange"
></el-pagination>
原因:
1. current-page.sync表示双向绑定,当currentPage变化时,会同步更新。
2. 如果未添加v-if="total != 0",则UI在total=0时,即Vue Page刚初始化时已经显示出来了,当currentPage再变化时,UI上不会同步触发更新UI操作,而是读取currentPage的初始值。
以上是关于Element-ui Vue 分页器,分页值更新后,UI未显示的主要内容,如果未能解决你的问题,请参考以下文章
swiper.js 2.0增加一个鼠标移入分页器的小点后就切换展示图片