vue2中二次封装element ui pagination组件

html部分

<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>

js部分

<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>

css部分

.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 = currentPagethis.pagination.pageSize = pageSize},}
}
</script>