Element的Pagination分页sync问题怎么解决

发布时间:2022-07-28 13:43:38 作者:iii
来源:亿速云 阅读:168

本文小编为大家详细介绍“Element的Pagination分页sync问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“Element的Pagination分页sync问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

今天用到Element-UI的Pagination分页组件时选择页面大小时和点击分页时,无法动态刷新页面数据,数据如下:

<div class="pagination">
      <el-pagination 
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

错误如下:

Element的Pagination分页sync问题怎么解决

按官方所说,加.sync,优化如下:

<div class="pagination">
      <el-pagination 
      background
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      ></el-pagination>
</div>

还是存在问题,当前页面能改变,但页面大小不变,如下所示:

Element的Pagination分页sync问题怎么解决

问题解析 ===> Element-ui el-pagination封装之sync多层的问题

最终优化方案:

<div class="pagination">
      <el-pagination 
      background
      :page-size="pageSize"
      :current-page="currentPage"
      :page-sizes='[5, 10, 20, 40]'
      :total="tableData.length"
      layout="total,sizes,prev,pager,next,jumper"
      @size-change="handlePageSizeChange"
      @current-change="handlePageChange"
      ></el-pagination>
</div>
methods: {
    
    handlePageChange(val) {
      this.currentPage = val
    },
    handlePageSizeChange(val) {
      this.pageSize =val
    }
}

优化结果:

Element的Pagination分页sync问题怎么解决

读到这里,这篇“Element的Pagination分页sync问题怎么解决”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Django中使用Pagination的分页范例源码
  2. 分页插件jquery.pagination.js

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

element pagination sync

上一篇:Python机器学习库scikit-learn怎么使用

下一篇:vue页面刷新产生白屏如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》