1.需要实现的是，上部有三个框 件数，重量，体积，下部是一个由件重体输入框组成的循环的数组，
当下部输入框值改变得时候上部通过监听随着改变
需要监听下部数组skuData，普通监听实现不了所以需要深度监听，使用完发现上部的输入框有可能失灵，所以在input上要添加@input="change" 方法里面加上vue强制刷新
change(){
this.$forceUpdate()
}
//resetArray调用是为了去除数组中重复对象和空对象因为下部的当前行数据有可能全都没有
resetArray(nowArr){
let arr1 = []
let obj ={}
for (let j in nowArr) {
for (let prop in nowArr[j]) {
if (prop != '' && nowArr[j][prop] != '') {
obj = nowArr[j]
}
}
if(Object.keys(obj)!=0){
arr1.push(obj)
}
}
(function () {//去除数组中重复对象
let unique = {};
arr1.forEach(function (a) {
unique[JSON.stringify(a)] = 1
});
arr1 = Object.keys(unique).map(function (u) {
return JSON.parse(u)
});
return arr1
})(arr1)
console.log(222222)
return arr1
}
//监听下部数组的改变从而对上部数据进行改变
skuData:{
handler:function(newVal,oldval){
let newArr = this.resetArray(newVal)
let quantity = 0
let volume = 0
let weight = 0
for (let i in newArr) {
//当itemNumber 和 quantity同时存在的时候才能改变上部数据
if(newArr[i].itemNumber && newArr[i].quantity){
quantity+=newArr[i].quantity ? Number(newArr[i].quantity) : 0
volume+= newArr[i].volume ? Number(newArr[i].volume) : 0
weight+= newArr[i].weight ? Number(newArr[i].weight) : 0
}
}
//明细数量 this.createdOrder.detailQuantity = sum
//数量
this.createdOrder.detailQuantity = (quantity == 0) ? '' : quantity
this.createdOrder.quantity = (quantity == 0) ? '' : quantity
this.createdOrder.grossWeight = (weight == 0) ? '' : weight
this.createdOrder.volume = (volume == 0) ? '' : volume
// 毛重 this.createdOrder.grossWeight
// 体积 this.createdOrder.volume
},
deep:true
},
网友评论