前端本地实现分页，利用了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)

巴特西

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

最新文章

热门文章