二次封装element ui pagination组件方式

<template>
    <div class="table-pagination">
        <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="paginationLayout"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
export default {
    name: "DiyPagination",
    props: {
        // 分页配置
        pagination: {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10, 20, 50, 100],
            paginationLayout: 'total, sizes, prev, pager, next, jumper',
        };
    },
    watch: {
        // 监听分页配置变化
        pagination: {
            immediate: true,
            deep: true,
            handler(val) {
                if (val) {
                this.currentPage = val.currentPage || 1;
                this.pageSize = val.pageSize || 10;
                this.total = val.total || 0;
                this.pageSizes = val.pageSizes || [10, 20, 50, 100];
                this.paginationLayout = val.layout || 'total, sizes, prev, pager, next, jumper';
                }
            }
        }
    },
    methods: {
        // 处理分页大小变化
        handleSizeChange(size) {
            this.pageSize = size;
            this.$emit('pagination-change', {
                pageSize: size,
                currentPage: this.currentPage
            });
        },
        // 处理当前页变化
        handleCurrentChange(page) {
            this.currentPage = page;
            this.$emit('pagination-change', {
                pageSize: this.pageSize,
                currentPage: page
            });
        },
    }
}
</script>

.table-pagination {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ebeef5;
    background-color: #fff;
}

<template>
<DiyPagination
            :pagination="pagination"
            @pagination-change="paginationChange"
            ></DiyPagination>
</template>

<script>
import DiyPagination from "@/components/DiyPagination/index.vue"
export default {
  components: {
    DiyPagination
  },
  data() {
    return {
      pagination: { // 表格分页配置
        currentPage: 1,
        pageSize: 20,
        total: null,
        pageSizes: [20, 50, 100],
        layout: 'total, sizes, prev, pager, next, jumper',
       },
    }
  },
  methods: {
    paginationChange({pageSize, currentPage}) {
          this.pagination.currentPage = currentPage
          this.pagination.pageSize = pageSize
    },
  }
}
</script>