ant-design纯前端分页

一般分页都是后台进行分页，可是因为一些特殊的情况，需要前端进行分页的功能，而且页面的序号也是由前端给出。然后经过各种百度以及大佬的指导，将这个方法记录下来

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);
   },