我們都知道封裝組件是為了方便在項目中使用，全局封裝之后哪個模塊使用直接復制就行了，分頁在后臺項目中用到的地方也是很多的，所以我們就全局封裝一下分頁組件，以后也方便在項目中使用，接下來封裝的這個分頁也是element-ui里最全的分頁功能。

1. 封裝分頁組件

在components文件下創建 AllPagination文件夾，在 AllPagination文件夾下創建 AllPagination.vue文件與index.js文件

AllPagination.vue文件

<template><div class="l_pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":page-size="paginationParameter.pageSize":current-page="paginationParameter.page":page-sizes="paginationParameter.pageSizes"layout="total, sizes, prev, pager, next, jumper":total="paginationParameter.total"></el-pagination></div>
</template>
<script>
export default {name: 'allPagination',props: {paginationParameter: {type: Object,default: () => {return ({pageSize: 20,page: 1,total: 0,pageSizes: [20, 50, 70],})}}},methods: {handleSizeChange(val) { // 返回當前的條數this.$emit('handleSizeChange', val)},handleCurrentChange(val) { // 返回當前的頁數this.$emit('handleCurrentChange', val)}}
}
</script>
<style lang='scss'>
.l_pagination{width: 100%;height: 35px;margin-top: 20px;text-align: right;.el-pagination{font-size: 14px !important;color: #666666;.el-pagination__total{font-size: 14px !important;color: #666666;}.el-pagination__jump{font-size: 14px !important;}li{font-size: 14px !important;font-weight: normal;}}
}
</style>

index.js文件

import AllPagination from './AllPagination';export default {install(Vue) {Vue.component('AllPagination', AllPagination);}
};

main.js文件

在全局js文件中引入封裝的分頁組件并注冊

import Vue from "vue";
import AllPagination from '@/components/AllPagination'; // 最全功能分頁
Vue.use(AllPagination);

2. 使用分頁組件

<template><AllPagination:paginationParameter="paginationParameter"@handleCurrentChange="handleCurrentChange"@handleSizeChange="handleSizeChange"/>
</template>
<script>data() {return {paginationParameter: {pageSize: 20, // 每頁多少條page: 1, // 當前第幾頁total: 0, // 總條數pageSizes: ['20','50','100'] // 可以選擇每頁展示多少條},}},methods: {handleSizeChange(val) {this.paginationParameter.pageSize = val;this.$nextTick(() => {this.init();}); },handleCurrentChange(val) {this.paginationParameter.page = val;this.$nextTick(() => {this.init();});},}
</script>