Vue Pagination分页器 在前端分页

tech2022-07-11  180

*【这里的需求是后台把一段数据传到前端,要自己做分页处理(我知道这一般都是用接口实现,但是需求到了就做吧】

首先是分页函数 数据部分

data:{ return{ listData:[], formInline: { page: 1, size:10, limit: 10, }, // 分页参数 pageparm: { currentPage: 1, pageSize: 10, total: 1 } } }

函数部分

<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination> organizePage(){ this.listData = [] //先把基本数据置为空 //依次把要用到的数据加入listData中 for(var i=(this.formInline.page-1)*this.formInline.limit;i<this.wholeListData.length&&i<this.formInline.page*this.formInline.limit;i++){ this.listData.push(this.wholeListData[i]) } }, callFather(parm) { this.formInline.page = parm.currentPage this.formInline.limit = parm.pageSize this.organizePage(); },
最新回复(0)