Vue数据更新，页面没有更新
目前做的业务是根据上面表格选中项，动态变化下面对应的表格，效果图如下
问题：console的时候数据一直是有更新的，但是页面始终没有变化
自己尝试了this.$nextTick( ()=>{ .... } ),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，结果没有实现；
再次尝试了this.$set(this.items, "itemType", selectItem.dictValue);结果还是没有实现，同样的数据一直在变化，页面始终没有变化。
参考网上其他方法：this.$forceUpdate()方法 （强制刷新）、this.reload（）.......
原因：
因为每个表格的列宽、高都一样，改变太小，导致vue无法识别，进而没有因为数据的变化去更改页面。
解决：
给每个列加一个唯一的标识：key="..."
<ux-excel-editor v-model="items.vipPointRedemptionTypeDetailList" no-paging :autoAddRow="(row) => handleAddProductRow(row)" @removeRows="(rows) => handleRemoveProductRow(rows)"> <ux-excel-column :label="l('Product')" type="custom" field="productName" @customclick="productCustomClick" :change="productChange" v-if="items.itemType==0" :key="0"> </ux-excel-column> <ux-excel-column :label="l('Brand')" field="brandName" type="custom" @customclick="brandCustomClick" :change="brandChange" v-if="items.itemType==1" :key="1"> </ux-excel-column> <ux-excel-column :label="l('Category')" field="categoryName" type="custom" @customclick="categoryCustomClick" :change="categoryChange" v-if="items.itemType==2" :key="2"> </ux-excel-column> <ux-excel-column :label="l('ItemQualifier')" field="itemQualifierName" type="custom" @customclick="qualifierCustomClick" :change="qualifierChange" v-if="items.itemType==3" :key="3"> </ux-excel-column> </ux-excel-editor>
setItemType(selectItem, rowData) { this.$set(this.items, "itemType", selectItem.dictValue); var exist = this.item.vipPointRedemptionTypeList.filter( (t) => t.itemType == selectItem.dictValue ); if (exist.length > 1) { this.$notify.error(this.l("itemTypeExist", selectItem.code)); rowData.itemType = null; rowData.itemTypeName = ""; } else { rowData.itemType = selectItem.dictValue; rowData.itemTypeName = selectItem.dictLabel; } },
原文链接：https://blog.csdn.net/weixin_42288182/article/details/108095456?spm=1001.2014.3001.5501
