將el-table表格的數據顯示在對話框的表單中,修改表單數據表格的數據也跟着變


問題:

點擊el-table表格一行數據中的編輯按鈕,將點擊的這一行數據顯示在對話框的表單里,表單里的數據一修改,無論對話框是點保存還是取消,表格的數據都變了

 

 原因:

是由於將表格那行數據 row 賦值給表單對象 this.sellDialogForm 造成的。

row是對象,this.sellDialogForm 也是對象,這是對象給對象賦值,對象屬於引用數據類型。

基本數據類型賦值時賦的是‘值’,賦值后的兩個變量之間並不會相互影響

引用數據類型(Object,Array)賦值時賦的是 ‘地址’ ,即賦值后兩個變量引用的是棧中相同的一個內存地址,兩變量之間會相互影響,其中一個變量的數據改變,另一個的數據也會跟着變。

賦值、淺拷貝和深拷貝的異同:

引用數據類型(Object/Array) 復制的數據是否和原數據相同 是否和原數據指向同一個對象 第一層數據類型為基本數據類型 原數據中有子對象
賦值:const obj2 = obj1; 改變會讓原數據一起改變 改變會讓原數據一起改變
淺拷貝:const obj2 = Object.assign({},obj1); 改變不會讓原數據一起改變 改變會讓原數據一起改變
深拷貝:const obj2 = JSON.parse(JSON.stringify(obj1)); 改變不會讓原數據一起改變 改變不會讓原數據一起改變

JSON.parse(JSON.stringify())深拷貝原理: 通過JSON.stringify將對象轉成JSON字符串,再通過JSON.parse()把JSON字符串解析成對象,這樣新的對象就產生了,而且對象會開辟新的棧,實現深拷貝。

 解決:

這里只需要用到對象第一層的基本數據類型,所以可以通過使用淺拷貝 Object.assign({}, obj) 解決;

也可以用深拷貝 JSON.parse(JSON.stringify(obj)) 。

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM