element中的分页使用

Question

朋友们，使用element ui中的分页组件时，想出现这个效果，点击跳到第一页和最后一页

我看了下文档没找到，朋友们，这个怎么解决呀

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"   
      :page-size="100"
      background
      layout="total, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

Answer 1

<div class="reportfont">
    <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, sizes"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currpage"
            :total="tableData.length"
            style="display: inline-block;padding-left: 0px;">
        <el-button type="button" @click="jumpLastPage" class="my-btn" style="margin: 0px 5px">尾页</el-button>
    </el-pagination>
</div>

element-ui默认跳转方法

handleSizeChange(psize) {
    this.pagesize = psize;
},
handleCurrentChange(cpage) {
    this.currpage = 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);
}