背景：
点击选中表格中的某一项后，该行数据会回显到下面，可以进行修改，修改后，左侧表格回显修改的数量；
右侧表格为左侧表格选中行的子项，右侧表格的每一项需要通过 【数量/份 * 左侧加工数量 = 预计使用数量】改变预计使用数量列的数据，底部回显第一行的数据。
// 左侧加工数量输入框，值改变，右侧所有的行预计使用数量都要变
// 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种方法
1.this.$nextTick()
2.this.$forceUpdate()
3.this.$set(obj, key, value)
4、更新表格数组使用...
参考文章：
关于vue中elementUI的input和select框值无法回显的问题解决
VUE中数组更新后，页面没有动态刷新问题
vue数据不更新的原因(vue中数据更改了，但是视图没有更新)
8种Vue中数据更新了但页面没有更新的情况
Vue数据更新但页面没有更新的多种情况
ES6 新特性 扩展运算符(…)详解