一、前端怎么实现分页
1、理解前端分页的概念
前端分页就是在前端对数据进行分页显示，分页的目的就是为了让用户更好地浏览数据。在分页的过程中，我们一般会使用限制每一页的条数，根据数据总数计算出总页数，实现对不同页码的数据请求。
2、实现前端分页的思路
前端分页的实现思路很简单，就是在接口请求完数据之后将数据渲染到页面上，通过计算每一页应该显示的数据，实现分页功能。在Vue中，我们可以通过计算属性和Watch属性来动态计算每一页的数据，实现前端分页的功能。
二、纯前端实现分页
1、Vue的分页插件Vue-paginate
// 引用Vue分页插件
import Paginate from 'vuejs-paginate'
// 注册Vue分页插件
export default {
name: 'app',
components: {
Paginate
},
data () {
return {
currentPage: 1,
perPage: 10,
totalItems: 20
}
},
computed: {
pageCount() {
return Math.ceil(this.totalItems / this.perPage)
},
startItem() {
return (this.currentPage - 1) * this.perPage
},
endItem() {
return this.startItem + this.perPage
},
pages() {
const pages = [];
for (let i = 1; i <= this.pageCount; i++) {
pages.push(i)
}
return pages;
}
},
watch: {
currentPage: function(val) {
this.startItem = (val - 1) * this.perPage;
this.endItem = this.startItem + this.perPage;
}
}
}
2、原生JS实现分页
function fenye(pageIndex, pageSize,totalCount) {
var pageData = [];//分页后的数据
if(pageIndextotalCount){//如果计算出来的当前页面显示条数超过了总数据条数
pageIndex=pageCount;//将当前页面显示条数设置为总数据条数
}
var startCount=pageSize*(pageIndex-1);//计算当前页面显示的第一条数据的索引
for (var i = startCount; i < totalCount&&i<startCount+pageSize; i++) {//将当前页面的数据循环存入pageData数组中
pageData.push(i);
}
console.log('第'+pageIndex+'页，每页'+pageSize+'数据：'+pageData.toString());//输出当前页面的数据
}
三、前端实现分页功能
1、在Vue中使用element-ui分页组件
| {{ item.name }} | {{ item.age }} |
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193797.html
微信扫一扫 
支付宝扫一扫 