欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-26 14:41:31
vue中elementui分页组件pagination的使用,供大家参考,具体内容如下一、概要elementui 提供了 el-pagination 组件,只要配置相应得参数和事件,即可实现分页。二、...

vue中elementui分页组件pagination的使用,供大家参考,具体内容如下

一、概要

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

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

二、实现

1、基本用法

2、后端分页的实现

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

3、前端分页的实现

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

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

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

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