element-ui+vue,翻页添加首页、尾页跳转按钮

 分页代码

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

搞定！并不需要像其他人说的那样，新建一个total，还要弄一个监听变化的对象，费死劲，都不知道他们都在说什么