elementui 封装 vue-element-admin的分页

以下代码：
下面是调用分页组件的地方

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
        查询
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100%;margin-bottom: 20px;"
    >
    省略.......
    </el-table>
    <Pagination :total="totalrows" :page.sync="pager.page" :limit.sync="pager.pagerow" @pagination="getPagination" />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { list, submit } from '@/api/certificate/purchase'
import Pagination from '@/components/Pagination/index'
export default {
  name: 'Index',
  components: {
    Pagination
  },
  data() {
    return {
      pager: {
        page: 1, // 当前页
        pagerow: 15 // 每页展示条数
      },
      totalrows: 0,
      listLoading: true,
      list: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },
    search() {
      this.pager.page = 1
      this.getList()
    },
    getPagination(val) {
      this.pager.page = val.page
      this.pager.pagerow = val.limit
      this.getList()
    },
    getList() {
      this.listLoading = false
      const filter = { ...this.pager }
      list(filter).then(res => {
        this.list = res.rows
        this.totalrows = res.totalrows
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
  }
}
</script>

子组件：

<template>
  <div :class="{ hidden: hidden }">
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      :background="background"
      v-bind="$attrs"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      :total="total"
      layout="total, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--
      :page-sizes="pageSizes" -->
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 15
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  // mounted(){
  //   console.log(this.total)
  // },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  /* padding: 32px 16px; */
}
.pagination-container.hidden {
  display: none;
}
</style>

附加scroll-to.js

Math.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()

/**
 * Because it's so fucking difficult to detect the scrolling element, just move them all
 * @param {number} amount
 */
function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
}

function position() {
  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

/**
 * @param {number} to
 * @param {number} duration
 * @param {Function} callback
 */
export function scrollTo(to, duration, callback) {
  const start = position()
  const change = to - start
  const increment = 20
  let currentTime = 0
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  var animateScroll = function() {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration)
    // move the document.body
    move(val)
    // do the animation unless its over
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)
    } else {
      if (callback && typeof (callback) === 'function') {
        // the animation is done so lets callback
        callback()
      }
    }
  }
  animateScroll()
}