作为一个Vue小白来说,写一个表格确实有些困难。最近遇到一个问题,就是表格修改数据。

每次在表格修改数据时,修改弹出框显示的数据时,表格内对应行总会跟着修改,一直不明白为什么,有幸读到一个人的文章恰好解决了这个问题,希望有同样问题的人可以借鉴一下。
借鉴链接:https://www.cnblogs.com/zbbk/p/13731305.html

一般来说弹框内的输入使用的是v-model进行双向绑定。当点击编辑按钮时把当前行的数据赋值给弹框内并渲染弹框数据。这时,会发现随着弹框输入,表格对应行的对应位置也发生了改变

如果只有确认按钮还能忍受,关键是数据已经改变,如果有取消编辑按钮,数据一样已经改变!

原因:数据是obj类型,赋值操作的时候把地址给共同绑定了。
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
不会引用原地址。不会修改到原来的内容。

注意:弹框点击确认时再处理数据,若是在编辑时处理数据,仍会两处数据变化。