最近重構一個項目，需要實現帶有首頁，末頁的分頁功能，

但是element的pagination并沒有這樣子，最完整功能如下

網上搜索了好多，發現有slot可以增加自定義項，但是

<el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="total,slot,prev,pager,next,slot, jumper":total="total":firstPage='firstPage':lastPage='lastPage'><el-button:disabled="currentPageNum === firstPage"class="first-pager"@click="toFirstPage">首頁</el-button><el-button:disabled="currentPageNum === lastPage"class="last-pager"@click="toLastPage">末頁</el-button></el-pagination>

這樣卻并不能實現，只能出現一個首頁的button，實在是找不到末頁的button哪里去了，不知道是不是只能帶一個slot

最后無奈只能這樣實現了，直接上代碼了

<template><div><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="total,slot,prev":total="total"><el-button :disabled="firstPageBtnDisabled" class="first-pager" @click="toFirstPage">首頁</el-button></el-pagination><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPageNum":page-size="pageSize"layout="pager,next,slot,jumper":total="total"><el-button :disabled="lastPageBtnDisabled" class="last-pager" @click="toLastPage">末頁</el-button></el-pagination></div> </template> <script> export default {name: "pages",components: {},data() {return {currentPageNum: this.currentPage,firstPageBtnDisabled: true,lastPageBtnDisabled: false,lastPageNum: Math.ceil(this.total / this.pageSize)};},props: {currentPage: {type: Number,default: 1},pageSize: {type: Number,default: 10},total: {type: Number,default: 0}},watch: {total(newVal, oldVal) {this.total = newVal;this.lastPageNum = Math.ceil(newVal / this.pageSize);}},created() {},methods: {handleCurrentChange(val) {this.firstPageBtnDisabled = val === 1 ? true : false;this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;this.currentPageNum = val;this.$emit("handleCurrentChangeSub", val);},toFirstPage(val) {this.handleCurrentChange();},toLastPage(val) {this.currentPageNum = this.lastPageNum;this.handleCurrentChange(this.lastPageNum);}},created() {},mounted() {},destroyed() {} }; </script> <style> .el-pagination {float: left; } </style>

全局注冊一下組件，在compones文件夾下新建index.js

import Vue from 'vue'import pages from './pages'Vue.component('pages', pages)

最后在main.js中引入就可以了

在組件中使用

<pages:total='fenye.total':currentPage='fenye.pageNum':pageSize='fenye.pageSize'@handleCurrentChangeSub="handleCurrentChange"></pages>

或有不足之處尚待修改

總結

以上是生活随笔為你收集整理的vue+element pagination分页的二次封装，带首页末页功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。