对elementUI的Pagination组件二次封装

为什么要二次封装

因为我们使用这种分页器的时候，每次都要复制一长串代码。

所以，我计划对pagination组件进行二次封装。

代码

创建公共组件Pagination.vue

<template>
  <el-pagination
    style="margin: 10px auto"
    @size-change="handleSizeChange"
    @current-change="handlePageChange"
    background
    :current-page="data.page"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="data.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.total"
  >
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    data: {
      type: Object,
      default () {
        return {
          page: 1,
          size: 10,
          total: 0
        }
      }
    }
  },
  data () {
    return {}
  },
  created () {},
  methods: {
    handleSizeChange (val) {
      this.data.size = val
      this.$emit('onPagePaging')
    },
    handlePageChange (val) {
      this.data.page = val
      this.$emit('onPagePaging')
    }
  }
}
</script>

在组件中使用

// 在引入、注册后
<Pagination :data="formInline" @onPagePaging="getData"></Pagination>

// 分页参数
      formInline: {
        type: 'scene',
        page: 1, // 必传
        size: 10, // 必传
        total: 20 // 因为有总计，所以必传
      },
//  获取数据中的total
getdata() {
      RuleList(this.formInline).then((rst) => {
        this.formInline.total = rst.total;
      });
    },