結合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賦值，如果遇到問題請留言