element-ui分页组件修改当前页current-page,

2022-12-08  本文已影响0人  rick_zhu

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++
}
上一篇下一篇

猜你喜欢

热点阅读