使用slot插槽添加首页和尾页按钮
:
<div class="paginationCustomize" v-if="tableData.length > 0">
<el-pagination
:page-sizes="pageSizes"
:page-size="tablePage.pageSize"
:current-page="tablePage.pageNo"
layout="total, sizes, slot,prev, pager, next"
:total="tablePage.tableTotal"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<el-tooltip content="跳转至首页" placement="top">
<button class="firstPage" :disabled="tablePage.firstPageDisabled" @click="toFirstPage">
<i class="el-icon-d-arrow-left"></i>
</button>
</el-tooltip>
</el-pagination>
<el-pagination
:page-sizes="pageSizes"
:page-size="tablePage.pageSize"
:current-page="tablePage.pageNo"
layout="slot, jumper"
:total="tablePage.tableTotal"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<el-tooltip content="跳转至尾页" placement="top">
<button class="lastPage" :disabled="tablePage.lastPageDisabled" @click="toLastPage">
<i class="el-icon-d-arrow-right"></i>
</button>
</el-tooltip>
</el-pagination>
</div>
添加首页和尾页按钮
:
data(){
return {
tablePage: {
pageNo: 1, // 当前页
pageSize: 10, // 展示数量
tableTotal: 0, // 总数
firstPageDisabled: true, // 首页
lastPageDisabled: true // 末页
},
pageSizes: [10, 20, 50, 100],
}
}
监听首页和尾页按钮是否禁用
:
watch: {
// 分页 计算首页和尾页
tablePage: {
handler (newVal) {
const pages = Math.ceil(newVal.tableTotal / newVal.pageSize);
if (pages === 0) {
// 数据(totalResult)为0
this.tablePage.firstPageDisabled = true; // 首页按钮是否禁用
this.tablePage.lastPageDisabled = true; // 尾页按钮是否禁用
} else {
this.tablePage.firstPageDisabled = newVal.pageNo === 1;
this.tablePage.lastPageDisabled = newVal.pageNo === pages;
}
},
deep: true
}
}
跳转首页和尾页
:
// 前往首页
toFirstPage () {
this.handleCurrentChange(1);
},
// 前往尾页
toLastPage () {
const max = Math.ceil(this.tablePage.tableTotal / this.tablePage.pageSize);
this.handleCurrentChange(max);
},
// 分页条数变化
handleSizeChange (psize) {
this.tablePage.pageSize = psize;
},
// 改变当前页码
handleCurrentChange (currentPage) {
this.tablePage.pageNo = currentPage;
this.getData();
}