element-ui的分页,添加首页、尾页,跳转按钮

要实现这要一个分页的效果

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.pagination
    let cpage = Math.ceil(font.total / font.pageSize);
    font.handleCurrentChange(cpage);
}

具体的样式问题根据自己的需求进行改写就可以了