VUE学习（五） 分页

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

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

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

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

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

页面

数据

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

方法

分页插件中绑定了一个handleCurrentChange 方法，这个方法是我们点击分页的下一页，或是第几页的时候触发。

            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },

每次点击切换页面后，就会执行查询数据的方法getData

            getData() {
                this.$api.queryOrg({
                   currentPage:this.cur_page,
                   pageSize:this.pageSize
                }).then((res) => {
                    this.totalSize = res.total;
                    this.tableData = res.list;
                })
            },