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

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

在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也都正常操作就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值