结合element分页组件封装自己的分页组件（完整示例）

首先引入框架和配置我就不说了，相信对大家来说不是问题，主要是怎么把element的分页组件封装为自己的需要注意的坑

废话不多说，上代码：

首先是引入的element分页组件和配置属性

<template>
  <div class="pagination">
    <el-pagination
      background
      :layout="layout"
      :pager-count="pagerCount"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="pageTotal"
      :current-page.sync="currentPages"
      @size-change="sizeChange"
      @current-change="current"
      @prev-click="prev"
      @next-click="next"
    ></el-pagination>
  </div>
</template>

然后是传递的参数和默认值以及相关处理分页函数，参数见说明

<script>
export default {
  name: "HotelPaginationTemplate",
  props: {
    /*说明：如果下面的参数没传，就会按照默认值进行设置pageTotal，pageFunc函数必须传和绑定，
    如果layout设置了sizes（指定当前页展示条数），则pageSize会按照指定的pageSizes数组里面
    的值来设置，指定的pageSize会被覆盖*/
    pageTotal: {
      type: Number,
      default: 1,//总页数
    },
    pagerCount: {
      type: Number,
      default: 11,//如果页数很多大概展示的页码
    },
    layout: {
      type: String,
      default: "total,sizes, prev, pager, next, jumper, ->, slot",//分页组件会展示的功能项
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 30, 40, 50, 100];//指定分页展示条数
      },
    },
    currentPage: {
      type: Number,
      default: 1,//指定跳转到多少页
    },
    pageSize: {
      type: Number,
      default: 10,//每页展示的条数，根据自己实际，且会带入请求
    },
    pageNum: {
      type: Number,
      default: 1,//第几页数据，根据自己实际，且会带入请求
    },
  },
  data() {
    return {
      pageData: {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      },
      currentPages: this.currentPage,
    };
  },
  mounted() {},
  methods: {
    //选择每页显示数量
    sizeChange(val) {
      this.pageData.pageSize = val;
      this.$emit("pageFunc", this.pageData);
    },
    //选择某一页
    current() {
      this.pageData.pageNum = this.currentPages;
      this.$emit("pageFunc", this.pageData);
    },
    //上一页
    prev() {
      this.pageData.pageNum = this.pageData.pageNum - 1;
      this.$emit("pageFunc", this.pageData);
    },
    //下一页
    next() {
      this.pageData.pageNum = this.pageData.pageNum + 1;
      this.$emit("pageFunc", this.pageData);
    },
  },
};
</script>

相关样式：

<style lang="less" scoped>
.pagination {
  width: 100%;
  padding:20px 0 20px 0;
}
</style>

实际引用：

<HotelPaginationTemplate
      :pageSize="pageSize"
      :layout="layout"
      :pageTotal="pageTotal"
      @pageFunc="pageFunc"
    ></HotelPaginationTemplate>

import HotelPaginationTemplate from "@/components/HotelPaginationTemplate";

components: {
    HotelPaginationTemplate,
  },

data() {
    return {
        pageSize: 10, //每页显示条数
        pageTotal: 1, //默认总条数
        pageNum: 1, //实际当前页码
        layout: "total,prev, pager, next, jumper, ->, slot",
    };
  },

//分页
    pageFunc(data) {
      this.pageSize = data.pageSize;
      this.pageNum = data.pageNum;
      this.getTablelist();//请求数据的函数
    },

注意：请求成功之后给pageTotal赋值，如果遇到问题请留言