要實現這要一個分頁的效果

HTML分頁代碼

<div class="user-pagination"><el-button type="button" @click="jumpFirstPage" class="my-btn">首頁</el-button><el-pagination ref="pagination"background prev-text="上一頁" next-text="下一頁"layout="prev, pager, next, slot"@current-change="handleCurrentChange":current-page="currentPage":total="total":page-size="searchForm.pageSize"style="display: inline-block;padding-left: 0px;"></el-pagination><el-button type="button" @click="jumpLastPage" class="my-btn" style="margin: 0px 5px">尾頁</el-button></div>

element-ui默認跳轉方法

handleCurrentChange(cpage) {this.currentPage= cpage; },

添加首頁、尾頁跳轉方法直接復制即可用:

jumpFirstPage () {this.$refs.pagination.handleCurrentChange(1);this.$emit('handleCurrentChange', 1); }, jumpLastPage () {let font = this.$refs.paginationlet cpage = Math.ceil(font.total / font.pageSize);font.handleCurrentChange(cpage); }

具體的樣式問題根據自己的需求進行改寫就可以了

總結

以上是生活随笔為你收集整理的element-ui的分页,添加首页、尾页,跳转按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

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