ibms/src/components/common/myPagination.vue

<!--
    props:{
        size: 当前页的页数,
        sizes: 下拉的条数,
        total: 总条数,
        currentPage: 当前页
    }
    @change 发生改变
-->
<template>
    <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentPage"
        :page-sizes="page.sizes"
        :page-size="page.size"
        :layout=" isSmall ? 'total, sizes, prev, pager, next, jumper' : 'prev, pager, next'"
        :total="page.total">
        </el-pagination>
    </div>
</template>
<script>
export default {
  name: "pagination",
  props: {
    page: {
      type: Object
    },
    isSmall:{
      type:Boolean,
      default: true
    }
  },
  methods: {
    //当前条数发生改变
    handleSizeChange(val) {
      this.page.size = val;
      this.change()
    },
    //当前页发生改变
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.change()
    },
    //发生改变
    change() {
      this.$emit("change");
    }
  }
};
</script>
<style>
.el-pagination button, .el-pagination span:not([class*=suffix]) {
    vertical-align: middle;
}
.block{
  /* margin-top: 5px; */
}
</style>