element-ui中分页组件的封装

代码是element-ui分页中的全部功能，包括当前页的改变，修改每页的数据传递等

<template>

  <div class="table-pagination">

    <div class="pagination-slot">

      <slot name="paginationLeft"></slot>

    </div>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSzie" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

  </div>

</template>

<script>

export default {

  data() {

    return {

      pageSzie: 10,

    }

  },

  props: ['total', 'currentPage', 'resetPagesize'],

  watch: {

    resetPagesize(newVal, oldVal) {

      this.pageSzie = newVal

    },

  },

  methods: {

    handleSizeChange(val) {

      //修改每页的size

      this.pageSzie = val

      this.$emit('handleSizeChange', val)

    },

    handleCurrentChange(val) {

      //当前页改变

      this.$emit('handleCurrentChange', val)

    },

  },

}

</script>

<style lang="scss" scoped>

.table-pagination {

  border-top: 1px solid #ddd;

  width: 100%;

  height: 55px;

  box-sizing: border-box;

  padding: 0 20px;

  display: flex;

  align-items: center;

  .pagination-slot {

    flex: 1;

  }

}

</style>