要實(shí)現(xiàn)這要一個(gè)分頁(yè)的效果

HTML分頁(yè)代碼

<div class="user-pagination"><el-button type="button" @click="jumpFirstPage" class="my-btn">首頁(yè)</el-button><el-pagination ref="pagination"background prev-text="上一頁(yè)" next-text="下一頁(yè)"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">尾頁(yè)</el-button></div>

element-ui默認(rèn)跳轉(zhuǎn)方法

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

添加首頁(yè)、尾頁(yè)跳轉(zhuǎn)方法直接復(fù)制即可用:

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); }

具體的樣式問(wèn)題根據(jù)自己的需求進(jìn)行改寫(xiě)就可以了

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。