element-uiの中で、フォームでデータを修正し、テーブルのデータも修正される問題を解決します.

2850 ワード

vue.js javascript typescript 先端

問題:フォームでデータを修正すると、テーブルのデータも修正されることが多くなります.決定またはキャンセルボタンを押すかどうかに関わらず、テーブルのデータは修正されます.一部のコードは以下の通りです.

editRow(row: any): void {
    this.currentInfo = row;
    this.dialogVisible = true;
    this.title = '    ';
  }

-問題の原因:

this.currentInfo = row;

このコードの中で、rowはObjectオブジェクトタイプで、直接に値を割り当てると、浅いコピーになります.コピーはアドレスです.フォームの中で値が変わるとテーブルの中のデータも変わりますので、深くコピーします.
-ソリューション:JSONを利用した深度コピー

editRow(row: any): void {
    this.currentInfo = JSON.parse(JSON.stringify(row));
    this.dialogVisible = true;
    this.title = '    ';
  }

-PS:jsには2つの異なるデータタイプがあります.一つは基本タイプで、一つは引用タイプです.ここでObjectは引用タイプです.