TcAssetVerificationPc/src/views/components/Pagination/index.vue

<template>
  <div :class="{'hidden':hidden}" class="my-pagination-container">
    <div class="leftTotal">
      <span class="custom"
        >总共 <span class="number">{{ total }}</span> 条：显示{{
          total == 0
            ? "0"
            : mypageNum == 1
            ? "1"
            : mypageSize * (mypageNum - 1) + 1
        }}-{{ numberMap }}条</span
      >
    </div>
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :page-sizes="[10, 20, 30]"
      :layout="layout"
      :pager-count="pagerCount"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- <div class="pagination-right">
      <div class="pagination-inputNumber">到第<el-input-number v-model="num" :controls="false" @change="handleChange" :min="1" :max="Math.ceil(total)"></el-input-number>页</div>
      <div class="pagination-confirm" :class="num ? 'pagination-cconfirm-two': ''" @click="handleConfirm">确定</div>
    </div> -->
  </div>
</template>

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

export default {
  name: 'myPagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    // 移动端页码按钮的数量端默认值5
    pagerCount: {
      type: Number,
      default: document.body.clientWidth < 992 ? 5 : 7
    },
    layout: {
      type: String,
      default: 'prev, pager, next, sizes, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mypageNum:1,
      mypageSize:10,
      num:undefined,
    };
  },
  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)
      }
    },
    //算数
    numberMap() {
      // if (this.total == this.tableData.length) {
      //   return this.total;
      // } else 
      if (
        this.total >
        this.mypageNum * this.mypageSize
      ) {
        return this.mypageNum * this.mypageSize;
      } else if (
        this.total < this.mypageNum * this.mypageSize ||
        this.total == this.mypageNum * this.mypageSize
      ) {
        return this.total;
      }
    },
  },
  watch:{
    page:{
      handler(newPage){
        this.mypageNum = newPage;
        this.mypageSize = this.limit;
        
      },
    }
  },
  methods: {
    handleSizeChange(val) {
      this.mypageSize = val;
      
      if (this.currentPage * val > this.total) {
        this.currentPage = 1
      }
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.mypageNum = val;
      // console.log(68 / 10);
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    // handleChange(val){
    //   this.$emit('pagination', { page: val, limit: this.pageSize })
    // },
    
  }
}
</script>

<style lang="scss" scoped>
.leftTotal {
  flex: 1;
  .custom {
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #292F38;
    line-height: 18px; 
    // span {
    //   margin: 0 3px;
    // }
  }
}
.pagination-right {
  display: flex;
  .pagination-inputNumber {
    .el-input-number {
      margin: 0 5px;
      width: 50px;
    }
  }
  .pagination-confirm {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    background: #F6F6F6;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #CCCCCC;
  }
  .pagination-cconfirm-two {
    background: #192a92;
    color: #f6f6f6;
    border: 1px solid #192a92;
  }
}
.my-pagination-container {
  display: flex;
  justify-content: space-between;
  background: #fff;
  width: 100%;
  // padding: 0 20px;
}
.my-pagination-container.hidden {
  display: none;
}
</style>