分页

封装组件

组件中的 部分需求可以根据项目删除

<template>
  <div style="text-align: right; padding-right: 50px; padding-top: 15px">
      
      <!-- 刷新按钮 -->
    <el-button
      size="mini"
      @click="currentChange(currentPage)"
      style="vertical-align: sub"
      >刷新</el-button
    >
    
    <el-pagination
      v-show="total > size"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="sizes"
      :page-size="size"
      :layout="layout || pageLayout"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSizeChange: false,
      sizes: [10, 20, 30, 50, 100],
      size: 20,
      currentPage: 1,
      startIndex: 0,
      pageLayout: "total, sizes, prev, pager, next, jumper",
    };
  },
  props: ["total", "layout"],
  mounted() {},
  methods: {
    sizeChange(size) {
      this.size = size;
      var page = parseInt(this.startIndex / size);
      page = page + 1 - (page % 1);
      this.currentPage = page == 0 ? 1 : page;
      if (this.currentPage > 1) {
        this.startIndex = (this.currentPage - 1) * this.size;
      } else {
        this.startIndex = 0;
      }
      this.isSizeChange = true;

      this.$emit("on-change", size, this.currentPage);
    },
    currentChange(page) {
      var elTable = document.getElementsByClassName("el-table__body-wrapper");
      if (elTable.length) {
        elTable[0].scrollTop = 0;
      }
      document.getElementById("app-main").scrollTop = 0; // 返回顶部 (可不要)
      this.currentPage = page;
      this.startIndex = (page - 1) * this.size;
      if (!this.isSizeChange) {
        this.$emit("on-change", this.size, this.currentPage);
      }
      this.isSizeChange = false;
    },
  },
};
</script>

<style>
    .el-pager .number {
      padding: 0 3px;
    }
</style>

 

 

使用组件

<!-- 分页 -->
<pagination ref="page" @on-change="queryList" :total="result.total">
</pagination>

 

/* 
    修改 分页 查询数据
*/
queryList() {
    // 从组件中获取 分页数，和页数大小
    this.formData.curPage = this.$refs.page.currentPage;
    this.formData.pageSize = this.$refs.page.size;
    
    // 调用列表查询接口
    this.API.admin.resourceList(this.formData).then(res => {
    this.result = res.content;
    });
},

 

.el-pager .number {

  padding: 0 3px;

}