ant-design-vue純前端分頁

由於項目需求需要采取前端分頁方式，最后找到解決方式

<a-table
        size="default"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="false"
      >
     ...此處省略部分代碼
</a-table>
<a-pagination
        size="middle"
        v-model="current"
        :pageSize="pageSize"
        @change="pageNumberChange"
        @showSizeChange="sizeChange"
        :pageSizeOptions="sizeList"
        :total="total"
        showSizeChanger
        showQuickJumper
/>

data中定義

sizeList: ['5','10', '20', '30'], //一頁能顯示條數
pageSize: 10, //當前頁顯示多少條
current: 1, //當前頁
total: 0, //總條數,在獲取后台數據時將數組的length賦值給total

分頁操作

//分頁頁數的改變
pageNumberChange(current, size) {
     this.current = current;
     this.pageSize = size;
     this.dataSource = this.getShowSource();
},
 //  分頁顯示條數的變化
sizeChange(current, size) {
     this.current = current;
     this.pageSize = size;
     this.dataSource = this.getShowSource();
},
//實現分頁效果
getShowSource() {
     var keyValue = 0;
     var data = this.showSource;//后端返回的全部數據
     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);
},