element中的分页使用

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

img

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


    @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">
    



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

用插槽 自定义内容 然后 加上点击事件 动态改变 pageNum 。 或者直接 在 分页组件 两边写个span 然后 写个 文字加上 点击事件 。推荐前者

用slot


<el-pagination
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"   
      :page-size="100"
      background
      layout="prev, pager, next,slot, jumper,total"
      :total="400"
    >
      <button style="float:left">
       首页
      </button>
        <button>
       最后一页
      </button>
    </el-pagination>

img

手动写这个两个点击事件的方法就可以了