vue-v-model 双向绑定-编辑弹框修改数据后页面数据跟着更改（取消弹框操作也已经被修改数据），利用 Object.assign解决对象引用同址问题

在做项目中经常会遇到table表格某行进行编辑。

当编辑表格行时弹出一个浮框，里面被赋值当前表格的各个元素。可以在此元素的基础上进行修改编辑操作。

一般浮框的输入项是用双向绑定v-model。

当点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。

这时候问题就容易出现了：浮框数据改变发现页面数据也跟着改变了。

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

其实原因很简单，数据是obj类型，赋值操作的时候把地址给共同绑定了。

这也是一个js的基础问题，对象等赋值数据类型的值和址应用等知识点

解决方案很简单，利用js提供的Object.assign()对象方法。

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

不会引用原地址。不会修改到原来的内容。

Edit (item) {
  let copy = Object.assign({}, item)
  this.addData = copy
  this.modal = true
},

整体代码：

                     <a-table
                          :columns="columns"
                          :data-source="tables"
                    >
                        <p slot="tags" slot-scope="text,tags,i">
                            <a-button size="small" type="primary" @click="fnEdit(text,tags,i)">编辑</a-button>
                            <a-button size="small" type="danger" @click="fnRemoveBtn(tags,i)">删除</a-button>
                        </p>
                    </a-table>

            fnEdit(text,tags,i){//编辑账号
                // this.thisEditRow = tags//编辑业务时要防止数组和对象的引用类型，不能直接赋值
                 let copy = Object.assign({}, tags)//tags是所编辑本行内数据对象
                 console.log(copy)
                 this.thisEditRow = copy
                // this.thisEditRow.key = tags.key
                // console.log(text,tags,i)//点击本文本，本行数据，本行的索引
                    this.showModal()
            },

另外附上弹框确认后把值附上去修改真正数据（显示在列表内数据）：

            EditHandleOk(e) {
                this.visible=false
                console.log(this.thisEditRow)
                this.data.map((item,i)=>{
                    if(item.key==this.thisEditRow.key ){
                        this.data.splice(i,1,this.thisEditRow)
                    }
                })
            },

这样即便是操作失误，取消或×掉编辑对话框也没关系了。数据不会被修改，只有在提交的时候才会修改页面数据。

 

 

扩展：如果是数组，或者里面某一项是数组，先用JSON.stringify(data)转换成字符串，再用JSON.parse(data)转换回来就不会引用源地址了。