我的部分代码
第一个分页
<div class="paging">
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPageNum"
:page-size="pageSize"
layout="total,slot,prev"
:total="this.solveLists.length"
>
<el-button
:disabled="firstPageBtnDisabled"
class="first-pager"
@click="toFirstPage"
>首页</el-button>
</el-pagination>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPageNum"
:page-size="pageSize"
layout="pager,next,slot,jumper"
:total="this.solveLists.length"
>
<el-button
:disabled="lastPageBtnDisabled"
class="last-pager"
@click="toLastPage"
>末页</el-button>
</el-pagination>
</div>
第二个分页
<div class="paging">
<el-pagination
background
@current-change="handleCurrentChange1"
:current-page.sync="currentPageNum1"
:page-size="pageSize1"
layout="total,slot,prev"
:total="this.hotLists.length"
>
<el-button
:disabled="firstPageBtnDisabled1"
class="first-pager"
@click="toFirstPage1"
>首页</el-button>
</el-pagination>
<el-pagination
background
@current-change="handleCurrentChange1"
:current-page.sync="currentPageNum1"
:page-size="pageSize1"
layout="pager,next,slot,jumper"
:total="this.hotLists.length"
>
<el-button
:disabled="lastPageBtnDisabled1"
class="last-pager"
@click="toLastPage1"
>末页</el-button>
</el-pagination>
</div>
data里面(关于两个分页的参数全部后面加1,很傻的办法)
// 分页
//第一个
pageSize: 4,
currentPageNum: 1,
total: 1,
firstPageBtnDisabled: true,
lastPageBtnDisabled: false,
lastPageNum: Math.ceil(this.total / this.pageSize),
//第二个
pageSize1: 4,
currentPageNum1: 1,
total1: 1,
firstPageBtnDisabled1: true,
lastPageBtnDisabled1: false,
lastPageNum1: Math.ceil(this.total1 / this.pageSize1)
methods里面(关于分页切换按钮,就只是参数变了)
// 分页功能
handleCurrentChange(val) {
this.firstPageBtnDisabled = val === 1 ? true : false;
this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
this.currentPageNum = val;
console.log(val);
this.$emit("handleCurrentChangeSub", val);
// 切换锚点
if (val == this.oldNum) {
} else {
this.oldNum = val;
window.scrollTo(0, 300);
}
},
toFirstPage(val) {
this.handleCurrentChange(1);
},
toLastPage(val) {
this.currentPageNum = this.lastPageNum;
this.handleCurrentChange(this.lastPageNum);
},
// 分页功能
handleCurrentChange1(val) {
this.firstPageBtnDisabled1 = val === 1 ? true : false;
this.lastPageBtnDisabled1 = val === this.lastPageNum1 ? true : false;
this.currentPageNum1 = val;
// console.log(this.firstPageBtnDisabled)
this.$emit("handleCurrentChangeSub", val);
// window.scrollTo(0, 300);
// 切换锚点
if (val == this.oldNum1) {
} else {
this.oldNum1 = val;
window.scrollTo(0, 300);
}
},
toFirstPage1(val) {
this.handleCurrentChange1(1);
},
toLastPage1(val) {
console.log(val)
// let lastPageNum1=Math.ceil(this.hotLists.length / this.pageSize1)
console.log(this.lastPageNum1)
console.log(this.total1)
// this.currentPageNum1 = this.lastPageNum1;
this.handleCurrentChange1(this.lastPageNum1);
}
}
这一个页面只用了两个分页,我后面需要用到三个,四个分页,不可能再用这种憨憨办法了呀,有没有大佬教一下我
慢慢逐渐养成一切皆组件的思维,
这是个掌握:把重复代码块抽出来做成组件,方便复用的机会,好好把握。
具体细节点比较多,不在一问一答简单范畴,这里给你指个方向,加油!