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>