前端本地实现分页，利用了antd的分页和数组的切片

html的结构

<a-pagination v-bind="pagination" @change="updatePage" @showSizeChange="sizeChange"/>

vue2，JavaScript代码

export default {
  data() {
    return {
      list: [],//在页面显示的数据列表
      newList: [],//总数据列表
      pagination: {
        pageSize: 50,
        total: 0,
        current: 1,
        pageSizeOptions: ['10','20','30','50', '100', '200'],
        showQuickJumper: true,
        showSizeChanger: true
      },
    }
  },

//pageSize变化
sizeChange(page, pageSize) {
  this.pagination.pageSize = pageSize
  this.list = this.newList.slice(0,pageSize)
},
//page变化
updatePage(page, pageSize) {
  this.pagination.current = page
  this.list = this.newList.slice(pageSize*(page-1),pageSize+(pageSize*(page-1)))
},

主要是利用数组的切片来实现的

this.newList.slice(start,end)