vue mixins pagination based on element-ui.

Pagination.vue

<template>
  <div>
    <el-pagination
      v-if="pagination.total > 10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="pagination.sizes"
      :page-size="pagination.size"
      layout="sizes, prev, pager, next"
      :total="pagination.total"
      style="margin-top:8px; float:right;">
    </el-pagination>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        current: 1,
        sizes: [5, 10, 20, 50],
        size: 10,
        total: null
      }
    }
  },
  methods: {
    loadData() {},
    handleSizeChange(val) {
      this.pagination.size = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadData()
    }
  }
}
</script>