实现上一条,下一条功能的快捷键_java下界要塞指令

项目场景：

列表页面，点击查看以后，展示当前一条数据的所有信息。点击上一条，下一条展示列表上相应信息

实现步骤：

1、拿到当前一条数据和所有数据
eg：this.$refs.creatModel.open(record，allList)this.$parents.allList
2、判断当前数据在所有数据中所在的下标位置
let index = allList.findIndex(item=>item.id === record.id)
3、实现上一条下一条
prev(){

index–
},
next(){

index++
}
4、判断边界条件
如第一条的时候，禁止点击上一条
最后一条的时候，禁止点击最后一条，
只有一条数据时，上下一条都禁止

open(){ 
   
	this.index = allList.findIndex(item=>item.id === record.id)
	if(this.index === 0){ 
   
		this.prevDis = true
	}
	if(this.index === allList.length-1){ 
   
		this.nextDis = true
	}
	if(allList.length === 0){ 
   
		this.prevDis = true
		this.nextDis = true
	}
},
prev(){ 
   
	this.index--
	if(this.index === 0){ 
   
		this.prevDis = true
	}
	this.nextDis = false
},
next(){ 
   
	this.index++
	if(this.index === allList.length-1){ 
   
		this.$message.warning('已经是最后一条数据啦')
		this.nextDis = true
	}
	this.prevDis = false
}

如果对你有帮助，请帮忙点个赞吧

今天的文章实现上一条,下一条功能的快捷键_java下界要塞指令分享到此就结束了，感谢您的阅读。