解决el-table中使用el-input-number时,组件数值无法正常更新

解决el-table中使用el-input-number时,组件数值无法正常更新_第1张图片

点击组件的 加 减 按钮时,发现数据无法更新,或者无法正常更新,每次只能点一两下,然后数值就不动了,而且它居然 还能影响其他行的组件。

在cdsn看了一些相关文章,最后在这里看到一句话,

https://blog.csdn.net/faster2017/article/details/115479081?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-115479081-blog-120740869.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-115479081-blog-120740869.pc_relevant_landingrelevant&utm_relevant_index=1

说这个问题是因为“绑定的数据未刷新是vue的绑定深度过多,没有关联绑定起来”

然后博主提供的解决方案是通过添加key属性来解决,我没试,我直接从数据源那里解决。

之前是从服务端获取数据列表,然后forEach逐条push给tableData。

tableData = []
res.list.forEach((row)=>{
  tableData.push(row)
})

现修改为:

tableData = []
res.list.forEach((row)=>{
  tableData.push(JSON.parse(JSON.stringify(row)))
})

经测试问题也可以完美解决,不需要key/row-key设置,表格中prop、v-model也都正常操作就可以了。

你可能感兴趣的:(前端脚本,elementui,vue)