基于elementUI分页组件实现前端分页功能

对于后端返回数据为进行分页的情况,前端可基于elementUI的分页组件实现分页效果。

第一步,使用前端分页组件

:data="list"

border

@select="handleSelectionChange"

@select-all="handleAllSelectionChange"

>

...

background

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="listQuery.page"

:page-sizes="[10, 30, 50]"

:page-size="listQuery.pageNum"

layout="total, sizes, prev, pager, next, jumper"

:total="totalNum"

>

第二步、使用computed计算属性得到分页参数

computed: {

// 使用前端实现分页的计算数据

list() {

// 分页的起始下标

const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;

// 分页的末尾下标

const endIndex = startIndex + this.listQuery.pageNum;

// 返回切割后的数据

return this.requestList.slice(startIndex, endIndex);

},

// 总条数

totalNum() {

return this.requestList.length;

},

// 总分页数

total() {

return Math.ceil(this.requestList.length / this.listQuery.pageNum);

},

},

data(){

return{

// 列表数据

requestList: [],

// 分页参数

listQuery: {

page: 1,

pageNum: 10,

},

}

}

第三步、绑定事件

// 每页列表数

handleSizeChange(val) {

this.listQuery.pageNum = val;

},

// 当前分页数(第几页)

handleCurrentChange(val) {

this.listQuery.page = val;

},

参考文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: