element-ui分页组件修改当前页current-page,分页组件显示current-page不刷新问题

1.当正常在methods方法中修改current-page后,视图上还是没改变

:current-page.sync="current"

增加一个.sync这样会生效

2.mounted中修改current-page后,视图上还是没改变

// 视图不更新情况
<el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
          @current-change="numClick"
          @prev-click="prevClickHandle"
          @next-click="nextClickHandle"
        >
</el-pagination>
 mounted () {
  this.currentPage = 2
}

比如:


image.png

不能自动变为:


image.png

解决办法是添加唯一key强制组件刷新:

// 添加key
<el-pagination
      :key="elementui_page_component_key"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      @current-change="numClick"
      @prev-click="prevClickHandle"
      @next-click="nextClickHandle"
    >
</el-pagination>
 mounted () {
  // 修改页码
  this.currentPage = 2
  // 强制组件刷新
  this.elementui_page_component_key++
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容