ant-design-vue 纯前端分页

由于项目需求需要采取前端分页方式，最后找到解决方式

     ...此处省略部分代码
      
      
    

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

*参考地址：https://blog.csdn.net/weixin_39040527/article/details/105550569