前端分页组件页码从0开始

<template>
  <div class="content">
    <el-pagination
      background
      :current-page.sync="currentPage"
      :page-sizes="childPager.pageSizes"
      :page-size="childPager.pageSize"
      :total="childPager.total"
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    name: "pagination",
    /** model: {
      prop: 'pagination',
      event: 'paggerChange'
    }, 这个东西也是双向绑定实现的方法 */
    props: {
      /** 外部传递过来pageIndex, pageSize, total */
      value: {
        type: Object,
        default: () => ({ pageCur: 0, pageSize: 10, total: 0, pageSizes: [5, 10, 50, 100] })
      },
    },
    data() {
      return {
        currentPage: 0, // 当前页码
        childPager: {}
      }
    },
    watch: {
      value: {
        handler (v) {
          this.childPager = JSON.parse(JSON.stringify(v))
          if (this.childPager.pageIndex === 0) {
            this.currentPage = 0
          } else {
            this.currentPage = this.childPager.pageIndex + 1
          }
          // 删除最后一页处理
          let totalPageIndex = Math.ceil(this.childPager.total / this.childPager.pageSize)
          totalPageIndex = totalPageIndex > 0 ? totalPageIndex - 1 : 0
          if (this.childPager.pageIndex > totalPageIndex) {
            this.childPager.pageIndex = totalPageIndex
            this.childPagerChange()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleSizeChange (val) {
        this.childPager.pageSize = val
        this.childPager.pageIndex = 0
        this.childPagerChange()
      },
      handleCurrentChange (val) {
        this.childPager.pageIndex = val - 1
        this.childPagerChange()
      },
      childPagerChange () {
        this.$emit('input', this.childPager)
        this.$emit('pagerEvent')
      },
    }
  }
</script>

<style scoped>
  .content{
    margin: 20px 0;
    text-align: right;
  }
</style>