一般分页都是后台进行分页,可是因为一些特殊的情况,需要前端进行分页的功能,而且页面的序号也是由前端给出。然后经过各种百度以及大佬的指导,将这个方法记录下来
table以及pagination的定义
<a-table
size="default"
bordered
:columns="columns"
:dataSource="showSource"
:loading="loading"
:pagination="false"
>
<span slot="action" slot-scope="text, record">
<a
@click="updateBlackList(record)"
:disabled="showButton"
>{{record.isBlackList==0?'移出黑名单':'加入黑名单'}}</a>
</span>
</a-table>
<a-pagination
size="middle"
style="margin-top:20px"
v-model="current"
:pageSize="pageSize"
@change="pageNumberChange"
@showSizeChange="sizeChange"
:pageSizeOptions="sizeList"
:total="total"
showSizeChanger
showQuickJumper
/>
</div>
在data中定义分页的参数
sizeList: ['10', '20', '30'], //一页能显示多少条
pageSize: 10, //当前实际一页显示多少条
current: 1, //当前是哪一页
total: 0, //总条数,在获取后台数据时将数组的length赋值给total
前端分页主要就是搞定分页的参数赋值,把各个参数都赋了正确的值,效果跟后台分页是一样的
分页操作的函数定义
//分页页数的改变
pageNumberChange(current, size) {
debugger;
this.current = current;
this.pageSize = size;
this.showSource = this.getShowSource();
},
// 分页显示条数的变化
sizeChange(current, size) {
debugger;
this.current = current;
this.pageSize = size;
this.showSource = this.getShowSource();
},
获取table的dataSource然后进行数组的分隔操作(因为要在前端进行序号的排列,然后就在数组的分隔操作时赋值一个keyValue,在表头取这个值,就可以进行序号的显示)
getShowSource() {
debugger;
var keyValue = 0;
var data = this.dataSource;
for (var i = 0; i < data.length; i++) {
keyValue = keyValue + 1;
let key = { key: keyValue };
data[i] = Object.assign(data[i], key);
}
var start = this.pageSize * this.current - this.pageSize;
var end = this.pageSize * this.current;
return data.slice(start, end);
},