<template>
  <div class="pagination-div">
    <a-pagination 
      size="small" 
      v-model:pageSize="props.pageData.limit"
      v-model:current="props.pageData.page" 
      :show-total="total => `共 ${total} 条数据`"
      :total="props.total" 
      show-size-changer 
      show-quick-jumper
      @change="changePage" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

const props = defineProps(["pageData","total"])
const emits = defineEmits(["changePageData"])

const changePage = (page, pageSize) => {
  console.log(page,pageSize)
  emits('changePageData',page,pageSize)
}
</script>

<style lang="scss" scoped>
.pagination-div{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
