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="下一页"l
·
分页代码
<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,还要弄一个监听变化的对象,费死劲,都不知道他们都在说什么
更多推荐
已为社区贡献11条内容
所有评论(0)