element 分页组件二次封装

新建一个组件

组件内容如下

<template>
  <div class="pagination-pages">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  // 获取从父元素传递过来的数据
  props: {
    currentPage: {
      type: Number,
      default: () => {}
    },
    pageSizes: {
      type: Array,
      default: () => {}
    },
    pageSize: {
      type: Number,
      default: () => {}
    },
    total: {
      type: Number,
      default: () => {}
    }
  },
  methods: {
    /**
     * 改变每页显示多少条数时，将数据传递给父元素
     */
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    },
    /**
     * 改变当前第几页，将数据传递给父元素
     */
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    }
  }
}
</script>

在父级组件引入组件并注册

import pagination from '../pagination.vue'
export default {
  components: {
    pagination
  }
 }

在父组件使用分页组件并传递参数给分页组件

 <pagination
        :currentPage="queryInfo.pagenum"
        :pageSizes="[1, 2, 5, 10]"
        :pageSize="queryInfo.pagesize"
        :total="total"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      ></pagination>

接收分页组件出发事件时传递的事件同时接收参数

 sizeChange(val) {
      this.queryInfo.pagesize = val
      this.getUserList()
    },
    currentChange(val) {
      this.queryInfo.pagenum = val
      this.getUserList()
    }