结合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赋值，若是遇到问题请留言