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未显示的主要内容,如果未能解决你的问题,请参考以下文章

Vue3基于element-plus的分页器实现

在element-ui的select下拉框加上滚动加载

vue中使用Swiper插件怎么修改他的分页器样式

swiper.js 2.0增加一个鼠标移入分页器的小点后就切换展示图片

2022-02-20 Vue中使用swiper,上下翻页和分页器自定义

Vue使用Element-UI实现分页效果