分页组件

<template>
  <div class="pagination-slot">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next, jumper"
      :current-page.sync="currentPage"
      :page-size="limit"
      :pager-count="7"
      :total="total"
      :small="small">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pagination",
  data() {
    return {
      current: this.currentPage
    }
  },
  props: {
    //总条数
    total: {
      type: Number,
      default: 0
    },
    // 每页显示多少数据
    limit: {
     type: Number,
     default: 10
    },
    //是否使用小型分页样式
    small: {
      type: Boolean,
      default: false
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    // 当前页变化
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    // size变化
    handleSizeChange(val) {
      this.currentPage = 1;    //重置页码为1
      this.$emit('handleSizeChange', val);
    }
  }
}
</script>

<style scoped>
.pagination-slot {
  margin: 30px 0;
  display: flex;
  justify-content: flex-end;
}
</style>