Vue3 setup element 封装 分页组件

<template>
  <el-pagination
    :background="background"
    v-model:current-page="innerPageNo"
    v-model:page-size="innerPageSize"
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
    v-bind="$attrs"
    class="mt-10px float-right"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
const props = defineProps(
  {
    background: {
      type: Boolean,
      default: false,
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper',
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 100],
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageNo: {
      type: Number,
      default: 1,
    },
  }
)

const emits = defineEmits(['change'])
const innerPageSize = computed({
  get() {
    return props.pageSize
  },
  set(val) {
    emits('change', {
      pageSize: val,
      pageNo: props.pageNo,
    })
  },
})

const innerPageNo = computed({
  get() {
    return props.pageNo
  },
  set(val) {
    emits('change', {
      pageSize: props.pageSize,
      pageNo: val,
    })
  },
})

const handleCurrentChange = (val: number) => {
  innerPageNo.value = val
}

const handleSizeChange = (val: number) => {
  innerPageSize.value = val
}

</script>