当我们向服务端请求大量数据的时候，并要在页面展示出来，怎么办？这个时候一定会用到分页。
本次所使用的是vue2.0+element-ui2.12实现一个分页功能，element-ui这个组件特别丰富，它给我提供了很多Pagination分页方式，这里使用其中一个快速完成分页功能。
最终效果展示：
?
下面说说实现原理及附上完整的代码，包括服务端代码（python）。
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="标题"
prop="title"
width="680">
</el-table-column>
<el-table-column
label="日期"
prop="date"
width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col :span="24">
<div style="padding-top: 20px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 50, 100]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</template>页面中的当前数据、分页中的当前页码、每页显示的数据条数及数据总条数需要先在data中定义：
data() {
return {
tableData: [],
currentPage: 1,
pagesize: 10,
total: 0
}
}页面中的实际数据需要通过异步的方式从后台读取，这里使用的是axios，methods中后面两个函数是分页用到的，作用是什么？代码中有说明：
methods: {
getList(){
let that = this;
let param = new URLSearchParams();
param.append(‘pageSize‘, this.pagesize);
param.append(‘pageNumber‘, this.currentPage);
that.$axios({
method: ‘post‘,
url: ‘http://localhost:9999/article/all_post/‘,
data: param
})
.then(function(res){
console.log(res);
let len = res.data.rows.length;
that.total = res.data.total;
that.tableData = [];
for(let i = 0; i<len; i++){
that.tableData.push({
id: res.data.rows[i].id,
title: res.data.rows[i].title,
date: res.data.rows[i].create_time,
desc: res.data.rows[i].content
});
}
})
.catch(function(err){
that.$message(err);
})
},
handleSizeChange: function (size) {
this.pagesize = size;
this.getList();
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //点击第几页
this.getList();
}
},
mounted(){
this.getList();
}服务端代码如下（通过django实现）：
@csrf_exempt
def all_post(request):
if request.method == ‘POST‘:
pageSize = int(request.POST.get(‘pageSize‘))
pageNumber = int(request.POST.get(‘pageNumber‘))
searchText = request.POST.get(‘searchText‘)
sortName = request.POST.get(‘sortName‘)
sortOrder = request.POST.get(‘sortOrder‘)
total = Article.objects.all().count()
articles = Article.objects.order_by(‘-id‘)[(pageNumber - 1) * pageSize:(pageNumber) * pageSize]
print(articles)
rows = []
data = {"total": total, "rows": rows}
for article in articles:
rows.append(
{‘id‘: article.id, ‘title‘: article.title, ‘content‘: article.content, ‘create_time‘: article.create_time})
return HttpResponse(json.dumps(data, cls=CJsonEncoder), content_type="application/json")原文：https://www.cnblogs.com/samve/p/11626480.html