vue 分页组件

1.新建一个vue文件pagination.vue

<template>
  <div class="all-father">
    <div v-if="showNotice" class="notice-page"> 共<span style="color: red;">{{ pages }}</span>页 / <span style="color: red;">{{ total }}</span>条数据</div>
    <ul class="mo-paging">
      <!-- first -->
      <!-- <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">1</li> -->
      <!-- <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first"><svg-icon icon-class="first_page"/></li> -->
      <!-- <li :class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">首页</li> -->

      <!-- prev -->
      <li :class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : (index === 1 || pageDisabled)}]" @click="prev"><svg-icon icon-class="previous_page"/></li>

      <!-- first -->
      <li :class="['paging-item', 'paging-item--first', {'paging-item--current' : index === 1}, {'paging-item--disabled' : pageDisabled}]" @click="first">1</li>

      <li v-if="showPrevMore" :class="['paging-item', 'paging-item--more', {'paging-item--disabled' : pageDisabled}]">...</li>

      <li v-for="(pager, i) in pagers" :class="['paging-item', {'paging-item--current' : index === pager}, {'paging-item--disabled' : pageDisabled}]" :key="i" @click="go(pager)"> {{ pager }} </li>

      <li v-if="showNextMore" :class="['paging-item', 'paging-item--more', {'paging-item--disabled' : pageDisabled}]">...</li>

      <!-- last 只有当最后一页大于1的时候才显示-->
      <li v-if="pages > 1" :class="['paging-item', 'paging-item--last', {'paging-item--current' : index === pages}, {'paging-item--disabled' : pageDisabled}]" @click="last">{{ pages }}</li>

      <!-- next -->
      <li :class="['paging-item', 'paging-item--next', {'paging-item--disabled' : (index === pages || pageDisabled)}]" @click="next"><svg-icon icon-class="next_page"/></li>

      <!-- last -->
      <!-- <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">{{ this.pages }}</li> -->
      <!-- <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last"><svg-icon icon-class="last_page"/></li> -->
      <!-- <li :class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">尾页</li> -->
    </ul>
    <!-- 跳转到某页 -->
    <div v-if="showJump" class="jump-page">
      <span class="ml20">跳至</span>
      <span class="page-jump-to">
        <input v-model="jump_page" :disabled="pageDisabled" type="type" @keyup.enter="go(parseInt(jump_page))">
      </span>
      <span>页</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoPaging',
  props: {
    // 页面中的可见页码，其他的以...替代, 必须是奇数
    perPages: {
      type: Number,
      default: 5
    },
    // 当前页码
    pageIndex: {
      type: Number,
      default: 1
    },
    // 每页显示条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总记录数
    total: {
      type: Number,
      default: 1
    },
    showNotice: { // 是否显示前面的提示信息( 共10页/100条数据 )  默认显示
      type: Boolean,
      default: true
    },
    showJump: { // 是否显示跳转页数的输入框  默认显示
      type: Boolean,
      default: true
    },
    pageDisabled: { // 翻页是否被禁用
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: this.pageIndex, // 当前页码
      limit: this.pageSize, // 每页显示条数
      size: this.total || 1, // 总记录数
      showPrevMore: false,
      showNextMore: false,
      totalPage: 0,
      jump_page: '' // 跳转到某页
    }
  },
  computed: {
    // 计算总页码
    pages() {
      return Math.ceil(this.size / this.limit)
    },

    // 计算页码，当count等变化时自动计算
    pagers() {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      const current = this.index
      const _offset = (perPages - 1) / 2

      const offset = {
        start: current - _offset,
        end: current + _offset
      }

      // -1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1

      // this.showPrevMore = offset.start > 1
      // this.showNextMore = offset.end < pageCount
      // 不
      for (let i = offset.start + 1; i < offset.end; i++) {
        array.push(i)
      }

      return array
    }
  },
  watch: {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    },
    pagers() {
      const perPages = this.perPages
      const pageCount = this.pages
      const current = this.index
      const _offset = (perPages - 1) / 2
      const offset = {
        start: current - _offset,
        end: current + _offset
      }
      this.totalPage = Math.ceil(this.size / this.limit) // 总页数
      this.showPrevMore = offset.start > 1 && this.totalPage > perPages // 只有在当前总页码数 > 页面中的可见页码 以及 (当前页-2) > 1的时候才在第一页前面显示 "..."
      this.showNextMore = offset.end < pageCount && this.totalPage > perPages
    }
  },
  methods: {
    prev() {
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next() {
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first() {
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last() {
      if (this.index !== this.pages) {
        this.go(this.pages)
      }
    },
    go(page) {
      if (!this.pageDisabled) {
        if (this.index !== page) {
          this.index = page
          if (page > this.totalPage) { // 当前页不能大于总页数
            this.index = this.totalPage
          }
          if (page < 1) { // 当前页不能小于1
            this.index = 1
          }
          // 父组件通过change方法来接受当前的页码
          this.$emit('change', this.index)
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.mo-paging[data-v-5a1caaca] {
  float: right;
}
.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more {
      background-color: #fff;
      color: #505050;
    }
    // 禁用
    &.paging-item--disabled {
      cursor: not-allowed !important;
      opacity: 0.75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    // 选中
    &.paging-item--current {
      background-color: #0275d8;
      color: #fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
    &.paging-item--prev,
    &.paging-item--next {
      padding: 6px 6px;
    }
  }
}
.all-father {
  display: flex;
  .notice-page {
    line-height: 52px;
    margin-right: 10px;
    font-size: 14px;
  }
  .jump-page{
    line-height: 52px;
    margin-left: 10px;
    font-size: 14px;
    color: gray;
    input {
      width: 36px;
      height: 28px;
      border: 1px solid gainsboro;
      border-radius: 3px;
      color: gray;
      text-align: center;
    }
  }
  justify-content: flex-end; // 将整个分页条向右放置
}
</style>

2.引用

import MoPaging from '@/components/common/pagination/pagination'

3.注册

 components: {MoPaging}

3.调用

  <!-- 分页条 -->
                <mo-paging
                  :page-index="currentPage"
                  :total="count"
                  :page-size="pageSize"
                  @change="pageChange" />

备注：在data里面定义

 pageSize: 20, // 默认每页显示20条数据
 currentPage: 1, // 当前页码
 count: 0, // 总记录数

// 从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    }