1.需要實(shí)現(xiàn)的是,上部有三個(gè)框 件數(shù),重量,體積,下部是一個(gè)由件重體輸入框組成的循環(huán)的數(shù)組,
當(dāng)下部輸入框值改變得時(shí)候上部通過監(jiān)聽隨著改變
需要監(jiān)聽下部數(shù)組skuData,普通監(jiān)聽實(shí)現(xiàn)不了所以需要深度監(jiān)聽,使用完發(fā)現(xiàn)上部的輸入框有可能失靈,所以在input上要添加@input="change" 方法里面加上vue強(qiáng)制刷新
change(){
this.$forceUpdate()
}
//resetArray調(diào)用是為了去除數(shù)組中重復(fù)對象和空對象因?yàn)橄虏康漠?dāng)前行數(shù)據(jù)有可能全都沒有
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 () {//去除數(shù)組中重復(fù)對象
? ? ? ? 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
}
//監(jiān)聽下部數(shù)組的改變從而對上部數(shù)據(jù)進(jìn)行改變
skuData:{
? ? handler:function(newVal,oldval){
? ? let newArr = this.resetArray(newVal)
? ? ? ? let quantity = 0
? ? ? ? let volume = 0
? ? ? ? let weight = 0
? ? ? ? for (let i in newArr) {
//當(dāng)itemNumber 和 quantity同時(shí)存在的時(shí)候才能改變上部數(shù)據(jù)
? ? ? ? ? ? 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
? ? ? ? ? ? }
}
? ? ? ? //明細(xì)數(shù)量 this.createdOrder.detailQuantity = sum
//數(shù)量
? ? ? ? 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
},