easy pagination mixin.

pagination-mixin.js

export default {
  data() {
    return {
      pagination: {
        currentPage: 1,
        pageSizes: [5, 10, 50, 100],
        pageSize: 10,
        total: null,
        layout: "sizes, prev, pager, next"        
      },
    }
  },

  computed: {
    
    _pagination() {
      return {
        pageIndex: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }       
    }
  },
  
  methods: {
    loadData() {}, // user implement

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },

    computeRowIndex(index) {
      return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
    },

    paginationCallback(total, length) {
      this.pagination.total = total

      // stupid search pagination
      if (!length && this.pagination.currentPage > 1) {
        this.pagination.currentPage = 1
        return this.loadData()
      }
    }
  }
}