由于业务需求,在补货详情页面,可以查看上一条、下一条数据,所以前端需要处理一下逻辑,觉得这个功能还挺有意思,并可能以后还会用到,特在此总结记录一下
// 显示上一台、下一台
btnShowFn(currId) {
if (this.finishedList.length > 1) { // 如果当前有大于1条的数据
const index = this.finishedList.findIndex(v => {
return v.id === currId;
})
if (index === 0) { // 如果当前是第一项
this.showNext = true;
}
if (index === this.finishedList.length -1) { // 如果当前是最后一项
this.showPre = true;
}
if (index !==0 && index !== this.finishedList.length -1) { // 如果当前既不是第一项,又不是最后一项
this.showNext = true;
this.showPre = true;
}
},
// 上一台
changePre() {
const index = this.finishedList.findIndex(v => {
return v.id === this.currId;
})
if (index - 1 === 0) { // 如果点击上一台之后,发现到了第一项
this.showPre = false;
}
this.currId = this.finishedList[index - 1].id;
this.btnShowFn(this.currId);
this.initData(this.vemId);
},
// 下一台
changeNext() {
const index = this.finishedList.findIndex(v => {
return v.id === this.currId;
})
if (index + 1 === this.finishedList.length - 1) { 如果点击下一台之后,发现到了最后一项
this.showNext = false;
}
this.currId = this.finishedList[index + 1].id;
this.vemId = this.finishedList[index + 1].vemId;
this.btnShowFn(this.currId);
this.initData(this.vemId);
}
至此,前一条、后一条整个逻辑完成