vue 封装element ui 分页组件 v-model方法使用

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page.pageNum"
    :page-sizes="pageSizes "
    :page-size="page.pageSize"
    :layout="layout"
    :total="page.total"
  >
  </el-pagination>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Component
export default class CPage extends Vue {
  @Prop({ default: 'total, sizes, prev, pager, next, jumper' })
  layout!: string

  @Prop({
    default: () => {
      return [10, 20, 30, 40, 50, 100]
    }
  })
  pageSizes!: number[]

  @Prop()
  value!: {
    pageSize: number,
    pageNum: number,
    total: number
  }

  @Watch('value', { immediate: true })
  handleChange () {
    this.page = this.value
  }

  page = {
    pageSize: 10,
    pageNum: 1,
    total: 0
  }

  handleInitData () {
    this.page.pageNum = 1
    this.handleSearch()
  }

  handleSizeChange (size: number) {
    this.page.pageSize = size
    this.page.pageNum = 1
    this.handleSearch()
  }

  handleCurrentChange (page: number) {
    this.page.pageNum = page
    this.handleSearch()
  }

  handleSearch () {
    this.$emit('input', this.page)
  }
}
</script>

<style scoped lang="scss">
</style>

<m-page v-model="page"/>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class xxxx extends Vue {
 page = {
    pageSize: 10,
    pageNum: 1,
    total: 0
 }
}
</script>

直接调用就可以使用分页了，不用传参很多，十分方便，如果有更复杂的业务处理可以，自己加入