elementUI分页

<template>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="curPage"
    :page-size="pageSize"
    :page-sizes="[10, 15, 20, 30, 40, 50, 100]"
    :layout="layout"
    :total="total"
  ></el-pagination>
</template>
<script>
export default {
  name: `pagination`,
  props: {
    pagecount: {
      type: Number,
      default: 10
    },
    pagesize: {
      type: Number,
      default: 20
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    islocalstorage: {
      type: Boolean,
      default: false
    },
    currentpage: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {}
  },
  computed: {
    total () {
      return this.pagecount
    },
    pageSize () {
      return this.pagesize
    },
    curPage () {
      return this.currentpage
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$emit('currentPage', val)
    },
    handleSizeChange (val) {
      if (this.islocalstorage) {
        localStorage.setItem('pageSize', val)
      }
      this.$emit('pageSize', val)
    }
  }
}
</script>

调用方法看这里