「掘金日新计划 · 4 月更文挑战」一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，

业务中为了效率快速实现一个条件分页器，一直想自己实现一个分页器，发现自己知识储备不够，有些吃力，新手宝宝可以通过这个案例来锻炼了，而且写完我本人思路更加清晰，你也有了更棒的思维逻辑！

实现效果

先需要简单使用element进行布局

别忘了引用组件

 <el-pagination
          @current-change="handleCurrentChange"
            :current-page="resizeData.currentPage" 
            :page-sizes="[5, 10, 20]" 
            :page-size="resizeData.pageSize"
            layout="prev, pager, next,total" 
            :total="resizeData.total">
  </el-pagination>

效果如下

一.在写之前我们要把逻辑思路捋清楚——最重要

1. 在 el-pagination 组件中，将 resizeData 的属性绑定到组件的相关属性上包括 currentPage、pageSize、total 等，这些属性会影响组件的展示效果。

2. 当用户改变当前页数时，handleCurrentChange 监听方法会被触发，需要在这个方法中更新 resizeData 的 currentPage 属性，并调用 teacherFindMediaByConditionPage 方法发送请求获取对应的数据。

3.最后在获取资源列表接口里面更新 resizeData 的 currentPage、pageSize 和 total 属性

实现结果

就是那么神奇那么奇妙实现了

结语： 写到这里我们功能就实现了，但是实际还是要看项目需求，我用的是最笨的方法，其实你学的不是很好的话但是你会用组件，其实功能都可以实现就是要把工具用会发挥到极致，就算菜那也算实现了功能需求，同志们！ 我们要知道更好的办法学以致用 记住它。

这是我在掘金上的第一篇文章，感谢您的观看！ 铁子