el 分页器封装

子组件：

<template>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="data.pageNumber"
    :page-size.sync="data.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.total"
  >
  </el-pagination>
</template>
<script>

export default {
  props: {
    data: Object,
    default: "",
  },
  methods: {
    // 改变每页条数
    handleSizeChange() {
      this.$emit("zxSize");
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.$emit("zxCurrent", val);
    },
  },
};

说明：

/*------------------------------------------------------------------------------------------

//父页面 写入标签:

    <zxpagination :data="queryData" @zxSize="zxSize" @zxCurrent="zxCurrent"></zxpagination>

    :data="queryData" //传入 querData 对象

    @zxSize="zxSize"  //对应 zxSize(){} 方法

    @zxCurrent="zxCurrent" //对应 zxCurrent(){} 方法
---------------------------------------------------------------------------------------------

//父页面 创建对象:

    queryData: {
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        }
---------------------------------------------------------------------------------------------

//父页面 JS中写入方法

    //改变每条页数

    zxSize() {
      //调取列表接口//
    }

    //当前第几页

    zxCurrent(val) {
      this.queryData.pageNumber = val; //重新赋值 pageNumber
      //调取列表接口//
    },
---------------------------------------------------------------------------------------------
*/