Element-ui Vue 分页器，分页值更新后，UI未显示

原代码：<el-paginationbackgroundlayout="prev, pager, next":total="total":page-size="pageSize":current-page="currentPage"@current-change="currentChange"></el-pagination>当currentPage更新成5后，下面的分页指

mr_raptor

7787人浏览 · 2020-08-19 16:08:06

mr_raptor · 2020-08-19 16:08:06 发布

原代码：

<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的初始值。