在使用element-ui的pagination分頁時，發現沒有跳轉到首頁和末頁的功能,那么現在就自己來實現一下這個功能。
實現后如下圖所示
先上完整代碼
<template><div class="container"><el-paginationclass="rear-page":current-page="tablePage.currentPage":page-sizes="pageSizeArr":page-size="tablePage.pageSize"layout="prev, pager, next, slot, jumper, sizes, total":total="tablePage.totalResult"@size-change="handleSizeChange"@current-change="handleCurrentChange"><!-- slot部分，跳轉末頁 --><buttonclass="lastPage":disabled="tablePage.lastPageDisabled"@click="toLastPage"><i class="el-icon-d-arrow-right"></i></button></el-pagination><el-paginationclass="ahead-page":current-page="tablePage.currentPage":page-sizes="pageSizeArr":page-size="tablePage.pageSize"layout="slot":total="tablePage.totalResult"@size-change="handleSizeChange"@current-change="handleCurrentChange"><!-- slot部分，跳轉首頁 --><buttonclass="firstPage":disabled="tablePage.firstPageDisabled"@click="toFirstPage"><i class="el-icon-d-arrow-left"></i></button></el-pagination></div>
</template>
<script>
export default {data() {return {pageSizeArr: [10, 20, 30, 40], // 顯示條目數組tablePage: {currentPage: 1, // 當前頁pageSize: 10, // 展示數量totalResult: 100, // 總數firstPageDisabled: false, // 首頁lastPageDisabled: true, // 末頁},};},watch: {// 分頁 計算首頁和末頁tablePage: {handler(newVal) {let pages = Math.ceil(newVal.totalResult / newVal.pageSize);if (pages === 0) {// 數據(totalResult)為0this.tablePage.firstPageDisabled = true; // 首頁按鈕是否禁用this.tablePage.lastPageDisabled = true; // 末頁按鈕是否禁用} else {this.tablePage.firstPageDisabled = newVal.currentPage === 1;this.tablePage.lastPageDisabled = newVal.currentPage === pages;}},// 一進頁面就執行immediate: true,deep: true,},},methods: {// 改變頁碼handlePageChange({ currentPage, pageSize }) {this.tablePage.currentPage = currentPage;this.tablePage.pageSize = pageSize;},// 改變每頁顯示數量handleSizeChange(pageSize) {this.tablePage.pageSize = pageSize;},// 改變當前頁碼handleCurrentChange(currentPage) {this.tablePage.currentPage = currentPage;},// 前往首頁toFirstPage() {this.handleCurrentChange(1);},// 前往末頁toLastPage() {let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize);this.handleCurrentChange(max);},},
};
</script>
<style scoped>
.el-pagination {float: right;margin-top: 10px;
}
.el-pagination.ahead-page {padding-right: 0px;
}
.el-pagination.rear-page {padding-left: 0px;
}
.firstPage,
.lastPage {background-color: white;cursor: pointer;
}
</style>
實現的原理是利用slot來自定義內容，就是帶有首頁和末頁的完整分頁由兩個pagination組件組成
<el-paginationclass="rear-page":current-page="tablePage.currentPage":page-sizes="pageSizeArr":page-size="tablePage.pageSize"layout="prev, pager, next, slot, jumper, sizes, total":total="tablePage.totalResult"@size-change="handleSizeChange"@current-change="handleCurrentChange"><!-- slot部分，跳轉末頁 --><buttonclass="lastPage":disabled="tablePage.lastPageDisabled"@click="toLastPage"><i class="el-icon-d-arrow-right"></i></button></el-pagination><el-paginationclass="ahead-page":current-page="tablePage.currentPage":page-sizes="pageSizeArr":page-size="tablePage.pageSize"layout="slot":total="tablePage.totalResult"@size-change="handleSizeChange"@current-change="handleCurrentChange"><!-- slot部分，跳轉首頁 --><buttonclass="firstPage":disabled="tablePage.firstPageDisabled"@click="toFirstPage"><i class="el-icon-d-arrow-left"></i></button></el-pagination>
其他的核心部分
- 判斷首頁和末頁button的disabled屬性值
watch: {// 分頁 計算首頁和末頁tablePage: {handler(newVal) {let pages = Math.ceil(newVal.totalResult / newVal.pageSize);if (pages === 0) {// 數據(totalResult)為0this.tablePage.firstPageDisabled = true; // 首頁按鈕是否禁用this.tablePage.lastPageDisabled = true; // 末頁按鈕是否禁用} else {this.tablePage.firstPageDisabled = newVal.currentPage === 1;this.tablePage.lastPageDisabled = newVal.currentPage === pages;}},// 一進頁面就執行immediate: true,deep: true,},},
如果本文對你有幫助，請點個贊吧！
總結
以上是生活随笔為你收集整理的element-ui的pagination分页 增加首页和末页的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
