Vue中ElementUI分页组件Pagination的使用方法

Vue中ElementUI分页组件Pagination的使用,供大家参考,具体内容如下

一、概要

ElementUI 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页。

二、实现

1、基本用法

<div class="pagination">

<el-pagination

background

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

:current-page="tablePage.pageNum"

:page-size="tablePage.pageSize"

:page-sizes="pageSizes"

:total="tablePage.total"

@size-change="handleSizeChange"

@current-change="handlePageChange"

/>

</div>

data() {

return {

tablePage: {

pageNum: 1, // 第几页

pageSize: 10, // 每页多少条

total: 0 // 总记录数

},

pageSizes: [10, 20, 30]

}

},

methods: {

handlePageChange(currentPage) {

this.tablePage.pageNum = currentPage

// 在此刷新数据

},

handleSizeChange(pageSize) {

this.tablePage.pageSize = pageSize

// 在此刷新数据

}

}

2、后端分页的实现

实现思路:向后台发送请求,传入pageNum、pageSize两参数,直接得到相应的分页数据。

// 获取数据

getData() {

let param = {

pageNum: this.tablePage.pageNum,

pageSize: this.tablePage.pageSize

}

// 请求后台接口函数

getDataApi(param, { loading: true }).then(res => {

// 后台返回数据

this.list = res.data.list

this.tablePage.total = res.data.total

})

},

3、前端分页的实现

实现思路:向后台发送请求,获取全部数据,前端通过pageNum、pageSize对数据进行处理,最终得到相应的分页数据。以下是处理数据得两种方法:

1、利用 Array.slice 截取想要的数组片段( 此方法要考虑 总页数为“1” 和 尾页 的情况)

2、利用 Array.filter 过滤出想要的数组片段(此方法无需考虑 总页数为“1” 和 尾页 的情况,只要满足条件即可

/**

* 分页数据处理

* @param data [Array] 需要分页的数据

* @param num [Number] 当前第几页

* @param size [Number] 每页显示多少条

*/

getList(data, num, size) {

let list, total, start, end, isFirst, isLast

total = data.length

isFirst = total < size

isLast = Math.ceil(total / size) === num

start = (num - 1) * size

end = isFirst || isLast ? start + (total % size) : start + size

list = data.slice(start, end)

list.forEach((item, index) => {

item.seq = index + start

})

return list

}

/**

* 分页数据处理

* @param data [Array] 需要分页的数据

* @param num [Number] 当前第几页

* @param size [Number] 每页显示多少条

*/

getList(data, num, size) {

let list, start, end

start = (num - 1) * size

end = start + size

list = data.filter((item, index) => {

return index >= start && index < end

})

list.forEach((item, index) => {

item.seq = index + start

})

return list

}

总结:无论是前端分页和还是后端分页,最终都需要拿到两个参数:pageNum(当前页)、pageSize(每页多少条)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue中ElementUI分页组件Pagination的使用方法 的全部内容, 来源链接: utcz.com/p/239256.html

回到顶部