Background:
After clicking to select an item in the table, the row data will be echoed below, and can be modified. After modification, the left table will echo the modified quantity; the right table is the sub-
item of the selected row in the left table. Each item in the table on the right needs to change the data in the column of estimated usage quantity through [quantity/part * left processing quantity = expected usage quantity], and echo the data in the first row at the bottom.
// 左侧加工数量输入框，值改变，右侧所有的行预计使用数量都要变
// storeData左侧表格，paperNoData右侧表格
qtyChange(e) {
let curItem = {
...this.storeData[this.goodsQuickInfo.index]}
if (isNumber(e)) {
// 预计使用数量=左侧的加工数量×原料的数量/份
curItem.qty = this.clearNoNumTwo(e)
// 左侧选中行底部 加工数量更新
this.$nextTick(()=> {
this.$set(this.goodsQuickInfo, 'qty',curItem.qty)
})
// 右侧表格的每一项计算
curItem.processPlanSourceGoodsVos.map((item) => {
item.qty = (curItem.qty * item.avgQty).toFixed(2)
})
} else {
curItem.qty = ''
this.$set(this.goodsQuickInfo, 'qty', '')
curItem.processPlanSourceGoodsVos.map((item) => {
item.qty = ''
})
}
this.storeData.splice(this.goodsQuickInfo.index, 1, curItem)
this.$nextTick(() => {
// 解决右侧表格数据更新，视图不更新，通过...扩展运算符浅拷贝重新赋值
this.paperNoData = [...curItem.processPlanSourceGoodsVos]
})
// 右侧选中行的 预计使用数量 更新
if(this.paperNoData.length !== 0) {
this.$set(this.goodsQuickInfo2, 'qty', this.paperNoData[this.goodsQuickInfo2.index].qty)
}
},
3 ways to solve the problem
1. this.$nextTick()
2. this.$forceUpdate()
3. this.$set(obj, key, value)
4. Update the table array using...
Reference article:
About the problem that the input and select box values of elementUI in vue cannot be echoed Solve
the problem that after the array in VUE is updated, the page
does not refresh
dynamically The data in Vue is updated but the page is not updated
Vue data is updated but the page is not updated in many cases
ES6 new feature extension operator (…) detailed explanation