vue--阶梯区间数据的监听--头尾数据实时同步

很早之前码的一个代码–记录一下。做阶梯区间的一个功能，发现做好容易，要增加客户的体验感有点不容易，前后上下input数据不能不一致。不能断层填写。截图说明：

如上图所示，比如两个2的input。我填写了上面的，那么下方的input就要同步改变，数据不同步改变就会导致区间不能连贯的闭合起来。这里用了input的实时触发事件，然后改变上（下）一层的数据（看思路就好，具体的数据不要深究）：

//触发input事件---修改上一级的upStairs值
changeinputdown(event,index){
	this.frParts[index-1].upStairs = this.frParts[index].downStairs;
},
//触发input事件---修改下一级的downStairs值
changeinputup(event,index){
	if(this.frParts.length>1){
		this.frParts[index+1].downStairs = this.frParts[index].upStairs;
	}
},

上方的代码会实现区间的同步（上一层后input和下一层前input或者反之）。还有情况就是区间不正规，如下

这里使用watch监听同一层前后两个数据的大小即可。

frParts:{
	deep:true,
		handler:function (res){
			if(res.length !== 1){
				let num = 0;//记录frParts中的数据是否有不合理的
				res.forEach((item,index)=>{
					let {downStairs,upStairs} =item;
					//downStairs大于等于upStairs就是不合理的数据
					if(Number(downStairs) > Number(upStairs) ||Number(downStairs) === Number(upStairs)){
						num++;
					}
					if(num !== 0){
						this.isguifan = true;
					}else{
						this.isguifan = false;
					}
				})
			}
		}
	}

还有阶梯的添加一层–删除一层也要细细琢磨情况，阶梯的渲染根据数组中的对象进行v-for即可，上述代码中的frParts为渲染的数据，添加阶梯也要监听数组中的数据是否有空值，防止提交数据时为空。
附上frParts的初始代码

frParts: [{downStairs: "0", upStairs: '', rate: '', default: true}],  //阶梯分润数组

思路仅供参考，具体的实现还要根据实际情况来操作。

如对您有所帮助，点个赞再走吧~qaq