element UI的表格和页码进行绑定

最新推荐文章于 2025-03-19 09:51:30 发布

Super_NineSheep

最新推荐文章于 2025-03-19 09:51:30 发布

阅读量544

点赞数

文章标签：前端 elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_40089156/article/details/127410401

版权

本文记录了一位开发者在使用Vue.js分页组件时遇到的问题及解决过程，包括忘记添加冒号和缺失.sync修饰符导致的分页功能失效。通过比对官网文档，修复了这些问题，使得分页器能够正常工作。分享了关键代码片段以供参考，提醒开发者注意细节避免类似错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

折腾了很久才发现自己犯了很简单的疏忽错误，其实按着官网一步一步来就没问题的，比如page-size='pageSize‘前面忘了加冒号，这个错误困扰了我好久，等我一点一点比对才发现，这个问题导致页码只显示1，且前后翻页键为disabled，解决这个问题后按照某博主的文章来做的话点击页码还是不更新表格内容，后来比照官网才发现:current-page后面必须要加.sync才能更新，粗心马虎导致我浪费了好几个小时的样子，记录一下引以为戒。
成功后的分页器代码如下：

 <el-pagination
        @current-chage="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-count="3"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>