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

mr_raptor CSDN认证博客专家 精益工程 驱动开发
北京同远天下创始人,专注于企业服务,企业系统解决方案,物联网,智慧社区,产品有众狐邮箱验证www.verify-mail.net,众狐微客服系统,著有《深入浅出嵌入式底层软件开发》北航出版社
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页