SOURCE

<script lang="jsx">
import { defineComponent, computed, ref, toRefs, watch } from "vue"

export default defineComponent({
  props: {
    pageNo: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    pageSizes: {
      type: Array,
      default:()=>[5,10,25,50]
    },
    layout: {
      type: String,
      default:"total, sizes, prev, pager, next, jumper"
    }
  },
  emits: ['update:pageNo','update:pageSize','pageNoChange','pageSizeChange','currentChange','sizeChange'],
  setup (props, { attrs, emit, slots, expose }) {

    const { pageNo, pageSize, pageSizes, layout } = toRefs(props);
    const paginationRef = ref(null)
    const getPageNo = computed({
      get () {
        return pageNo.value
      },
      set (val) {
        emit('update:pageNo', val)
        emit('currentChange', val)
        emit('pageNoChange', val)
      }
    })
    const getPageSize = computed({
      get () {
        return pageSize.value
      },
      set (val) {
        emit('update:pageSize', val)
        emit('sizeChange', val)
        emit('pageSizeChange', val)
      }
    })

    watch(() => getPageSize.value,
      (newVal) => {
        getPageNo.value = 1
      })

    expose({ paginationRef })

    return () => (<el-pagination
      key={pageSize.value}
      v-model:current-page={getPageNo.value}
      v-model:page-size={getPageSize.value}  
      page-sizes={pageSizes.value}
      default-current-page={1}
      default-page-size={getPageSize.value}
      hide-on-single-page
      layout={layout.value}
      class="base-pagination"
      popper-class="is-base-pagination-tooltip"
      {...attrs}
      ref={paginationRef}
    />)
  }
})
</script>


<style lang="scss">
.base-pagination {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  vertical-align: middle;
  .el-pager li+li{
    margin-top: 0;
  }
}
</style>