前端实现上一条、下一条

由于业务需求，在补货详情页面，可以查看上一条、下一条数据，所以前端需要处理一下逻辑，觉得这个功能还挺有意思，并可能以后还会用到，特在此总结记录一下

// 显示上一台、下一台
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);
}

至此，前一条、后一条整个逻辑完成