<!--
 * @Author: 表格分页
 * @Date: 2023-10-20 09:34:38
 * @LastEditTime: 2023-11-13 18:34:05
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \project\src\components\aboutTable\Pages\index.vue
-->
<template>
  <div class="fenye" :style="{ top: tableHeight+10 + 'px' }">
    <el-pagination
      :current-page="
        pageData.configer.currentPage ||
        pageData.configer.pageNo ||
        pageData.configer.current ||
        pageData.configer.pageCurrent ||
        pageData.configer.pageNum"
      :page-size="pageData.configer.pageSize || pageData.configer.size"
      :page-sizes="pageSizeArr"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.configer.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue";

const props = defineProps({
  pageSizeArr: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  background: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  small: {
    type: Boolean,
    default: false
  },
  marginTop: {
    type: Number,
    default: 10
  },
  tableHeight: {
    type: Number
  },
  pageConfiger: {
    type: Object,
    default: () => {
      return {
        pageSize: 10,
        currentPage: 1,
        total: 0
      };
    }
  }
});
const pageData = reactive({
  configer: {}
});
const emit = defineEmits(["changeSize", "changeNo"]);
// 改变每页条数
const handleSizeChange = (val) => {
  emit("changeSize", val);
};
// 翻页
const handleCurrentChange = (val) => {
  emit("changeNo", val);
};
watchEffect(() => {
  pageData.configer = props.pageConfiger;
});
</script>

<style lang="scss" scoped>

</style>
