vue 自封装分页器

需要引用的组件中：

 <!-- 分页器 -->
    <rg-pagination
      :totalCount="totalCount"
      :pageSize="pageSize"
      :currentIndex="pageIndex"
      :pageSizes="[10, 30, 50, 100]"
      @onHandleSizeChange="handleSizeChange"
      @onHandleCurrentChange="handleCurrentChange"
    ></rg-pagination>

import RgPagination from "@/components/RgPagination";
import {
  storeList,
  storeDelete,
  searchstoreType
} from "../../../../api/shop.js";
export default {
  data() {
    return {

      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      tableData: []
    };
  },
  components: {
    RgPagination
  },
  methods: {
    handleSizeChange(value) {
      this.pageSize = value;
      this.get_StoreList();
    },
    handleCurrentChange(value) {
      this.pageIndex = value;
      this.get_StoreList();
    },
    async get_StoreList() {
      let Params = {
        name: this.name,
        category: this.category,
        currentPage: this.pageIndex,
        pageSize: this.pageSize
      };
      const res = await storeList(Params);
      this.tableData = res.data;
      this.totalCount = res.total;
    },
 },
  created() {
    this.get_StoreList();
  },
}

。。fenghzuang
@/components/RgPagination.vue

<template>
  <div class="pagination-wrap">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="rgCurrentIndex"
      :page-sizes="rgPageSizes"
      :page-size="rgPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rgTotalCount"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: ["totalCount", "pageSize", "currentIndex", "pageSizes"],
  data() {
    return {};
  },
  computed: {
    rgTotalCount() {
      return +this.totalCount || 0;
    },
    rgPageSize() {
      return this.pageSize || 20;
    },
    rgCurrentIndex: {
      get() {
        return this.currentIndex || 1;
      },
      set(val) {}
    },
    rgPageSizes() {
      return this.pageSizes || [20, 50, 100];
    }
  },
  methods: {
    handleSizeChange(value) {
      this.$emit("onHandleSizeChange", value);
    },
    handleCurrentChange(value) {
      this.$emit("onHandleCurrentChange", value);
    }
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import "./index.scss";
</style>

@/components/RgPagination.css

.pagination-wrap {
  display: flex;
  // justify-content: flex-end;
  margin: 20px 0;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding-left: 30px;

  .el-pagination__jump,
  .el-pagination__total {
    font-size: 13px !important;
    font-family: PingFangSC-Regular, PingFang SC !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 1) !important;
  }
}

.el-input__inner:hover {
  border-color: #CF995F !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: rgba(255, 145, 23, 1);
}

.el-pager li.active {
  color: #fff;
  background: rgba(255, 145, 23, 1);
  border-radius: 2px;
}