Vue使用Element UI時,使用深拷貝避免修改彈窗資料與表格資料連動

有個常遇到的使用情境,就是將 el-table 的資料回顯到彈窗 el-dialog 給使用者修改,且在不使用 VueX 去管理資料的情況下,直接將獲取的資料直接丟到 data() 去,然後在 el-dialog 直接將 data() 展示在欄位上即可

但因為是同一筆資料的引用,當你在 el-dialog 上修改資料時,連同 el-table 上展示的資料也會跟著變動,此時就可以使用深拷貝(Deep Copy / Deep Clone)的方式解決這個問題

this.form = JSON.parse(JSON.stringify(row))


轉載請注明來源,歡迎對文章中的引用來源進行考證,歡迎指出任何有錯誤或不夠清晰的表達。可以郵件至 b8954008@gmail.com