首頁、上一頁、下一頁、末頁、跳轉按鈕
- 因為el-pagination只有一個插槽，所以通過兩個el-pagination插槽分別加入首頁、末頁按鈕，再拼接這兩個el-pagination的方式來實現首頁、末頁按鈕
- 跳轉按鈕不用加事件，如果el-pagination修改了前往的頁數，失焦時會觸發current-change事件，造成了一種似乎是點擊按鈕跳轉的效果（實際上點擊其他地方失焦也會觸發current-change事件）
<template><div class="pagination"><el-paginationprev-text="上一頁"next-text="下一頁"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="tableParams.pageNum":page-sizes="[20, 30, 40]":page-size="tableParams.pageSize"layout="total, sizes, slot, prev, pager, next":total="tableParams.total"><buttontype="button"class="btn-prev"@click="jumpFirstPage":disabled="isFirstPage"><span>首頁</span></button></el-pagination><el-paginationprev-text="上一頁"next-text="下一頁"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="tableParams.pageNum":page-sizes="[20, 30, 40]":page-size="tableParams.pageSize"layout="slot, jumper":total="tableParams.total"><buttontype="button"class="btn-prev"@click="jumpLastPage":disabled="isLastPage"><span>末頁</span></button></el-pagination><el-buttontype="primary"size="mini"class="ml">前往</el-button></div>
</template>
<script>
export default {props: {tableParams: {type: Object,},},computed: {isFirstPage() {// 如果只有1頁，禁用首頁return this.tableParams.pageNum === 1;},isLastPage() {return (// 如果只有1頁，禁用末頁，或者已經處于末頁，禁用Math.ceil(this.tableParams.total / this.tableParams.pageSize) === 0 ||this.tableParams.pageNum ===Math.ceil(this.tableParams.total / this.tableParams.pageSize));},},methods: {handleSizeChange(val) {this.$emit('size-change', val);},handleCurrentChange(val) {this.$emit('current-change', val);},jumpFirstPage() {this.handleCurrentChange(1);},jumpLastPage() {this.handleCurrentChange(Math.ceil(this.tableParams.total / this.tableParams.pageSize));},},
};
</script>
<style lang="scss" scoped>
.pagination {padding: 6px;border: 1px solid #c0eae7;border-top: 0px;display: flex;justify-content: flex-end;align-items: center;border-radius: 4px;border-top-left-radius: 0px;border-top-right-radius: 0px;
}
:deep(.el-button--mini) {padding: 5px 15px;height: 24.22px;margin-left: 10px;
}
</style>
使用
<Pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":tableParams="tableParams"></Pagination>
組件默認pageNum 從1開始，如果接口是從0開始，傳參時-1即可
tableParams: {pageNum: 1,pageSize: 30,total: 0,},
handleSizeChange(val) {// 條數變更后如果pageNum不變可能會導致查詢為空，所以還原為1this.tableParams.pageNum = 1;this.tableParams.pageSize = val;this.getTableData();},handleCurrentChange(val) {this.tableParams.pageNum = val;this.getTableData();},
async getTableData() {this.tableData = [];this.tableLoading++;const { data: res } = await http({method: 'get',url: '/show/listData',data: {},params: {pageIndex: this.tableParams.pageNum,pageSize: this.tableParams.pageSize,},});if (res.code === 0) {this.tableData = res.data;this.tableParams.total = res.total;}this.tableLoading--;},
