suzhouyingjiPC/src/views/components/myPagination/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-04 13:11:33
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-27 16:36:54
-->
<template>
  <div class="pagination">
    <slot></slot>
    <div class="right">
      <span class="custom"
        >共{{ total }}条，显示{{
          total == 0
            ? "0"
            : pageNum == 1
            ? "1"
            : pageSize * (pageNum - 1) + 1
        }}-{{ numberMap() }}条</span
      >
      <el-pagination
        background
        :small="true"
        :page-sizes="[10, 15]"
        :total="total"
        layout=" prev, pager, next, sizes, jumper"
        @current-change="currentChange"
        @size-change="sizeChange"
        :current-page.sync="pageNum"
        :page-size.sync="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum:1,
      pageSize:10,
    }
  },
  props:{
    total:{
      type:Number,
      required:true
    },
  },
  methods:{
    currentChange(e) {
      this.pageNum = e;
      this.$emit('pagesChange',{pageSize:this.pageSize,pageNum:e})
    },
    // 每页显示数改变
    sizeChange(e) {
      this.pageSize = e;
      this.pageNum = 1;
      this.$emit('pagesChange',{pageSize:e,pageNum:this.pageNum})
    },
    // 回到默认页码
    defaultPages(){
      this.pageSize = 10;
      this.pageNum = 1;
    },
    //算数
    numberMap() {
      // if (this.total == this.tableData.length) {
      //   return this.total;
      // } else 
      if (
        this.total >
        this.pageNum * this.pageSize
      ) {
        return this.pageNum * this.pageSize;
      } else if (
        this.total < this.pageNum * this.pageSize ||
        this.total == this.pageNum * this.pageSize
      ) {
        return this.total;
      }
    },
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳至";
  },
}
</script>
<style lang="scss" scoped>
.pagination {
  // margin-top: vh(20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  // padding-bottom: vh(20);
  ::v-deep .el-pagination__jump {
    margin: 0;
  }
  ::v-deep .el-input--mini .el-input__inner {
    height: 23px;
    line-height: 23px;
  }
  ::v-deep .el-input--mini .el-input__icon {
    line-height: 23px;
  }
  .custom {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #525966;
  }
}
</style>