page分页封装

封装el-Pagination

• 目前在编写项目中，每个页面都有el-Pagination，所以对el-Pagination做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。

分析问题：

• el-taPaginationble是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：
• 其实很简单，几乎不用考虑其他问题，照猫画虎就可以了。
• 直接搬过来用。（除非有特殊需求，在进行改造）
• 组件使用方法：( 请查看《page表格API》)。

组件内部template：

<template>
  <div>
    <div class="page">
      <el-pagination
        :background="data.background"
        :hide-on-single-page="data.hideOnSinglePage"
        :page-size="data.pageSize"
        :page-sizes="data.pageSizes"
        :total="data.total"
        :current-page="data.currentPage"
        :layout="data.layout"
        @current-change="chagePage"
        @size-change="SizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'wb-page',
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
    };
  },
  methods: {
    // 页数改变时候触发
    chagePage: function(currentPage) {
      this.$emit('currentChange',currentPage)
    },
    // 每页显示多少条改变时候触发
    SizeChange: function(size){
      this.$emit('sizeChange',size);
    }
  }
};
</script>
<style scoped>

</style>