基于el-pagination的二次封装

1.组件代码

<template>
  <el-pagination
    :style="{
      'text-align': align,
      'margin-top': '20px    '
    }"
    v-bind="$attrs"
    :background="background"
    :current-page.sync="pageSzie.current"
    :hide-on-single-page="onpage"
    :layout="layout"
    :total="total"
    :page-sizes="pageSizes"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>
<script>
/**
 * @module components/base/Pagination
 * @desc 分页组件
 * @vue-prop {Number} total - 分页总数
 * @vue-prop {Number} page - 分页码
 * @vue-prop {Number} [limit=20] - 分页数
 * @vue-prop {Array} [pageSizes=[10, 20, 30, 50]] - 分页数量选项
 * @vue-prop {Boolean} background - 是否添加背景
 * @vue-prop {Boolean} onpage - 只有一页是否隐藏分页
 * @vue-prop {String} align - 分页布局  'left', 'right','center'
 * @vue-prop {String} pageSzie - 默认分页数据，主要是给父页面请求接口的 页数，当前页码
   此组件需要再父页面传递pageSzie,因为大多的接口，页面都需要页数和页码来进行请求筛选，建议使用mixins的方法引入
 */
export default {
  name: 'basePagination',
  props: {
    total: {
      require: true,
      type: Number
    },
    background: {
      type: Boolean,
      default: true
    },
    onpage: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: 'right'
    },
    pageSizes: {
      type: Array,
      default: () => [20, 100, 200, 300, 400]
    },
    layout: {
      type: String,
      default: 'prev, pager, next, jumper, sizes, total'
    },
    pageSzie: {
      require: true,
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 20
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    handleSizeChange (val) {
      this.$emit('update:pageSzie', {
        current: this.pageSzie.current,
        size: val
      })
      this.$parent.getList()
    },
    handleCurrentChange (val) {
      this.$emit('update:pageSzie', { current: val, size: this.pageSzie.size })
      this.$parent.getList()
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped></style>

2.创建pagination.js（用mixin的方法在父页面引入页码，页数，总数）

export const pagination = {
  data () {
    return {
      total: 100,
      pageSzie: {
        current: 1,
        size: 20
      }
    }
  }
}

3.父页面引入

<template>
    <basePagination :total="total" :pageSzie.sync="pageSzie"></basePagination>
</template>

<script>
import { pagination } from '@/mixin/pagination.js'
export default {
  mixins: [pagination],
  name: 'Home',
  components: {},
  data () {
    return {
    }
  },
  methods: {
    // 获取数据的方法 页码组件固定了获取方法名，如需更改请自行在页面组件更改
    getList () {
      console.log(this.pageSzie)
    }
  }
}
</script>

4.组件传递的参数使用方式