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;
                })
            },

 

你可能感兴趣的:(vue,分页,vue分页,vue)