VUE学习（五） 分页

这里分页采用的是element-ui的分页组件，喜欢自己研究的小伙伴可以去element-ui的官网去查看使用方法。这里简单介绍下分页的流程吧！

 想要对查询的数据进行分页，首先需要知道查询的数据总共有多少条，然后是每页展示多少条，第几页！知道这三个就足够了。其中

totalSize:是总条数，需要后台查询后返回

cur_page:是当前页，也就是查看第几页的数据，需要前端传给后端接口

pageSize:是每页展示多少条，前端写死就好

页面

<div class="pagination">
     <el-pagination background @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="totalSize" :pageSize="pageSize">
      </el-pagination>
 </div>

数据

data() {
       return {
                tableData: [],
                cur_page: 1,
                totalSize:0,
                pageSize:10
               
            }
        }