iview分頁組件二次封裝

代碼如下：

父組件代碼

<template>
  <div>
    <Pager v-model="pageDto" @currentchange="changePage" @sizechange="changeSize" />
  </div>
</template>

<script>
import Pager from '@/common/components/Pager.vue'
export default {
  components: {
    Pager
  },
  data () {
    return {
      pageDto: {
        total: true, // 顯示總數
        sizer: true, // 顯示分頁
        elevator: true, // 顯示跳轉功能
        count: 0, // 共多少條數據
        pageNum: 1, // 當前第幾頁
        pageSize: 20 // 每頁默認多少條
      }
    }
  },
  methods: {
    changePage (value) {
      this.pageDto.pageNum = value
      this.xxx() // 調用查詢接口
    },
    changeSize (value) {
      this.pageDto.pageSize = value
      this.xxx() // 調用查詢接口
    },
    xxx () {
      let page = {
        pageSize: this.pageDto.pageSize,
        pageNumber: this.pageDto.pageNum
      }
      // 將分頁信息page作爲參數傳給後臺
      // 將接口返回的總頁數賦值count
      // this.pageDto.count = res.data.pageInfo.totalItem
    }
  }
}
</script>

<style>
</style>

封裝的子組件代碼

<template>
  <section class="pager">
    <Page :show-total="pageDto.total" :show-elevator="pageDto.elevator" :show-sizer="pageDto.sizer" :total="pageDto.count" :page-size="pageDto.pageSize" :current="pageDto.pageNum" @on-page-size-change="handleSizeChange" @on-change="handleCurrentChange" />
  </section>
</template>

<script>
import { Page } from 'view-design'


/**
 * 基於iview的分頁組件，配置服務端的pageDto
 *
 * @author oralinge
 */
export default {
  components: {
    Page
  },
  props: {
    // pageDto
    value: {
      type: Object,
      default: function () {
        return {
          'count': 80,
          'curPageCount': 1,
          'pageNum': 1,
          'pageSize': 20,
          'totalPageNum': 1,
          'total': true, // 顯示總條數
          'sizer': true, // 顯示分頁
          'elevator': true // 顯示跳轉功能
        }
      }
    }
  },
  data () {
    return {
      // 當前的pageDto
      pageDto: this.value
    }
  }
  },
  methods: {
    /**
         * 分頁大小發生改變
         *
         * @param {value} 當前的分頁大小
         */
    handleSizeChange (val) {
      this.$emit('sizechange', val)
    },
    /**
         * 分頁碼發生改變處理
         *
         * @param {value} 當前的分頁碼
         */
    handleCurrentChange (val) {
      this.$emit('currentchange', val)
    }
  }
}
</script>
<style lang="scss">
.pager {
  position: relative;
  margin-top: 20px;
  text-align: right;
  padding-right: 10px;
}
.pager-slot-wrap {
  position: absolute;
  left: 10px;
  top: -10px;
}
</style>