封装分页组件

效果图

 主要框架：vue2+element

一：pagination组件代码

<template>
  <!-- 原理：
  分页中有三个地方需要使用插槽（首页，末页，确定），一个分页模块中只能使用一个插槽，所以将分页分成三段 -->
  <!-- 第一段：【total，slot(首页)】  -->
  <!-- 第二段：【prev, pager, next, slot(末页), sizes, jumper】 -->
  <!-- 第三段：【slot(确定)】 -->
  <div class="containerPag" :class="{ hidden: hidden }">
    <el-pagination
      ref="pagination"
      class="ahead-page"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      layout="total,slot"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <button
        class="firstPage"
        :disabled="firstPageDisabled"
        @click="toFirstPage"
      >
        首页
      </button>
    </el-pagination>
    <el-pagination
      ref="pagination"
      class="rear-page"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      layout="prev, pager, next, slot, sizes, jumper "
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <button class="lastPage" :disabled="lastPageDisabled" @click="toLastPage">
        末页
      </button>
    </el-pagination>
    <el-pagination
      ref="pagination"
      class="ahead-page"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      layout="slot"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <el-button
        type="primary"
        size="mini"
        class="btndif"
        @click="handleCurrentChange"
        >确定</el-button
      >
    </el-pagination>
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";

export default {
  name: "Pagination",
  props: {
    total: {
      required: true,
      type: Number,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array,
      default() {
        return [2, 20, 30, 50];
      },
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    background: {
      type: Boolean,
      default: true,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      firstPageDisabled: false, //  首页
      lastPageDisabled: true, //  末页
      childTotal: "",
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      },
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      },
    },
  },
  watch: {
    // 注意一：
    // 子组件中的数据通过props来接受，
    // 子组件的methods中想要取到props中的值，直接使用this.total即可
    // 你的total里面的值并不是固定的，而是动态获取的，
    // 这种情况下，你会发现methods中是取不到你的total的，或者取到的一直是默认值
    // 解决办法用watch解决（获取不到total，刚进页面【末页】按钮是点击不了的）
    total: {
      handler(newval) {
        this.childTotal = newval;
      },
      immediate: true,
      deep: true,
    },
    // 分页 计算首页和末页
    currentPage: {
      handler(newVal) {
        setTimeout((_) => {
          let pages = Math.ceil(this.childTotal / this.pageSize);
          if (pages === 0) {
            // 数据(totalResult)为0
            this.firstPageDisabled = true; // 首页按钮是否禁用
            this.lastPageDisabled = true; // 末页按钮是否禁用
          } else {
            this.firstPageDisabled = this.currentPage === 1;
            this.lastPageDisabled = this.currentPage === pages;
          }
        }, 500);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    //   前往首页
    toFirstPage() {
      this.$refs.pagination.handleCurrentChange(1);
      this.$emit("handleCurrentChange", 1);
    },
    //  前往末页
    toLastPage() {
      // 注意二：
      // 因为组件中的this指向组件实例，
      // this.$refs.pagination指向要操作的元素
      let font = this.$refs.pagination;
      let cpage = Math.ceil(font.total / font.pageSize);
      font.handleCurrentChange(cpage);
    },
  },
};
</script>

<style scoped>
.containerPag {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: end;
}
.el-pagination {
  float: left;
  margin-top: 10px;
}
.el-pagination.ahead-page {
  padding-right: 0px;
}
.el-pagination.rear-page {
  padding-left: 0px;
}
.firstPage,
.lastPage {
  background-color: white;
  cursor: pointer;
}
.totalData {
  margin-left: 24px;
  font-weight: normal;
  color: #303133;
  display: inline-block;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  box-sizing: border-box;
}
.el-pagination .btndif {
  background: #1890ff;
}
.el-pagination .btndif:hover {
  color: #fff;
}
::v-deep .el-pagination__jump {
  margin-left: 0px;
}
</style>

二：引入全局

在main.js中导入，可全局使用

import Pagination from "@/components/Pagination";

三：使用（页面中直接使用）

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />