常用组件封装——分页

前言

其实element-ui封装的分页组件已经很够用了，但是在开发后台管理系统时，很多时候多需要用到分页，每个页面都会写有很多重复的分页代码。

因此呢，可以进行适当的封装减少很多重复性工作。当然啦，我们可以根据自身业务的不同对很多东西进行二次封装，如表单、图表、ajax请求等等，我这里只是抛砖引入而已啦～

如何封装？

1. 创建子组件

<!--
 * @Author: 小西瓜
 * @Description: 分页组件
-->
<template>
  <div class="pagination">
    <el-pagination
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :background="background"
      v-bind="$attrs"
      v-on="$listeners"
      @size-change="sizeChange"
      @current-change="currentChange"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    // 是否继承父组件的所有属性
    // inheritAttrs: true,
    props: {
      // 当前页
      pageNum: {
        type: Number,
        default: 1
      },
      // 每页显示多少条
      pageSize: {
        // 每页显示多少条
        type: Number,
        default: 10
      },
      // 每页显示多少条选项数组
      pageSizes: {
        type: Array,
        default: () => {
          return [10, 30, 50]
        }
      },
      // 总数
      total: {
        type: Number,
        default: 0
      },
      // 分页的功能选项
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      // 是否有背景色
      background: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      // 改变当前页
      currentChange(val) {
        this.$emit('onPageChange', {
          pageNum: val,
          pageSize: this.pageSize
        })
      },
      // 改变每页显示多少条
      sizeChange(val) {
        this.$emit('onPageChange', {
          pageNum: this.pageNum,
          pageSize: val
        })
      }
    }
  }
</script>

2. 在父组件中使用

<pagination 
    ref="pagination" 
    :page-num="pageNum" 
    :total="50" 
    @onPageChange="onPageChange">
</pagination>
<script>
  export default {
     methods: {
       onPageChange(pagination) {
         console.log(pagination.pageNum, pagination.pageSize)
       }
     }
  }

3. 效果图