Vue を使用して 2 つのデータ セットの違いを比較する視覚化コンポーネントの詳細な説明

小道具: {
  ユニークキー: {
    タイプ: 文字列、
    デフォルト: "id"
  },
  データグループ: {
    タイプ: 配列、
    バリデータ: val => val.length === 2
  },
  列: {
    タイプ: 配列、
    必須: true
  }
}

<テンプレート>
  <div class="diff-table-container">
    <el-テーブル
      v-for="(data, i) がcompletedData内に存在する"
      :key="i"
      :data="データ"
      :row-style="行スタイルをマーク"
      :cell-style="マークセルスタイル"
    >
      <el-table-column v-for="列内の項目" :key="`${i}${item.prop}`" align="center" v-bind="item" />
    </el-table>
  </div>
</テンプレート>

<style lang="scss" スコープ>
.diff-table-container {
  ディスプレイ: フレックス;
  align-items:flex-start;
  .el-table + .el-table {
    左マージン: 20px;
  }
}
</スタイル>

データ（） {
  戻る {
    DIFF_CELL_KEY: Symbol("diffCells"), // 差異のあるセルの名前を格納する配列 COMPLETED_KEY: Symbol("completed") // 完了した処理をマークします };
}

メソッド: {
  // 処理後、マークがない場合は、1セットのデータ、つまり新しいデータにのみ表示されることを意味します markRowStyles({ row }) {
    戻る （
      !row[this.COMPLETED_KEY] && {
        背景色: "#E1F3D8"
      }
    );
  },
  // 現在の行の一意のキーに基づいて、マップにキャッシュされた行データを検索します // つまり、dataGroup[0].find(item => item[uniqueKey] === row[uniqueKey])
  // 次に、DIFF_CELL_KEY配列に現在の列の属性名が含まれているかどうかを判断します。markCellStyles({ row, column }) {
    const { $_cacheMap、uniqueKey、DIFF_CELL_KEY } = this;
    _cacheRow を $_cacheMap.get(行[一意のキー]);
    戻る （
      _cacheRow &&
      _cacheRow[DIFF_CELL_KEY].includes(列.property) && {
        背景色: "#FDE2E2"
      }
    );
  }
}

計算: {
  // 完了したデータの処理completedData({ dataGroup, uniqueKey, columns, DIFF_CELL_KEY, COMPLETED_KEY }) {
    // この手順は不要です。ビジネス要件に従って、元のデータを変更できない場合は、ディープ コピーを作成します。const _dataGroup = deepClone(dataGroup);
    // Map<string|number, object>、私はTSに詳しくありませんが、これはこのように書くべきで、実際はrow[unique]: rowです
    const cacheMap = 新しい Map();
    // まず最初のデータセットを走査し、DIFF_CELL_KEY配列を初期化し、それをマップに格納します for (const _row of _dataGroup[0]) {
      _row[DIFF_CELL_KEY] = [];
      キャッシュマップを設定します(_row[uniqueKey], _row);
    }
    // 2番目のデータセットを走査します。内部に別のループがあります。列で定義された属性のみが処理されるため、他の属性は比較されません for (const _row of _dataGroup[1]) {
      for (const { prop } 列) {
        // 一意のキーの場合は直接スキップします if (prop === uniqueKey) continue;
        // キャッシュから同じデータを検索 const original = cacheMap.get(_row[uniqueKey]);
        // 見つからない場合は、このデータが新しく追加されたことを意味するので、スキップします if (!original) continue;
        // それ以外の場合は、2 つのデータ セットにマークを付けて、処理済みであり、新しく追加されたものではないことを示します。_row[COMPLETED_KEY] = true;
        オリジナル[COMPLETED_KEY] = true;
        // 最後に、2 つのプロパティ値を比較します。同じ場合は、DIFF_CELL_KEY 配列にプッシュします。// DIFF_CELL_KEY 配列は最初のデータ セットにのみ存在することに注意してください。// 違いはすべてのテーブルに表示されるため、すべてのデータ セットに保存する必要はありません。_row[prop] !== original[prop] && original[DIFF_CELL_KEY].push(prop);
      }
    }
    // スタイルを処理するときに使用されるため、マップのコピーをここに保存します。$_cacheMap = cacheMap;
    _dataGroup を返します。
  }
}

<テンプレート>
  <div class="diff-table-container">
    <el-テーブル
      v-for="(data, i) がcompletedData内に存在する"
      :key="i"
      :data="データ"
      :row-style="行スタイルをマーク"
      :cell-style="マークセルスタイル"
    >
      <el-table-column v-for="列内の項目" :key="`${i}${item.prop}`" v-bind="item" align="center" />
    </el-table>
  </div>
</テンプレート>

<スクリプト>
関数 deepClone(val) {
  // ディープコピーを行うかどうかは要件によって異なります。 return val;
}

エクスポートデフォルト{
  名前: "DiffTable",
  小道具: {
    ユニークキー: {
      タイプ: 文字列、
      デフォルト: "id"
    },
    データグループ: {
      タイプ: 配列、
      バリデータ: val => val.length === 2
    },
    列: {
      タイプ: 配列、
      必須: true
    }
  },
  データ（） {
    戻る {
      DIFF_CELL_KEY: シンボル("diffCells")、
      COMPLETED_KEY: シンボル("完了")
    };
  },
  計算: {
    完了データ({データグループ、一意のキー、列、DIFF_CELL_KEY、COMPLETED_KEY}) {
      _dataGroup を deepClone します。
      const cacheMap = 新しい Map();
      _dataGroup[0]のconst _rowに対して{
        _row[DIFF_CELL_KEY] = [];
        キャッシュマップを設定します(_row[uniqueKey], _row);
      }
      _dataGroup[1]のconst _rowに対して{
        for (const { prop } 列) {
          (prop === uniqueKey) の場合は続行します。
          定数オリジナル = cacheMap.get(_row[uniqueKey]);
          if (!original) 継続;
          _row[COMPLETED_KEY] = true;
          オリジナル[COMPLETED_KEY] = true;
          _row[prop] !== original[prop] && original[DIFF_CELL_KEY].push(prop);
        }
      }
      this.$_cacheMap = キャッシュマップ;
      _dataGroup を返します。
    }
  },
  メソッド: {
    markRowStyles({行}) {
      戻る （
        !row[this.COMPLETED_KEY] && {
          背景色: "#E1F3D8"
        }
      );
    },
    markCellStyles({ 行, 列 }) {
      const { $_cacheMap、uniqueKey、DIFF_CELL_KEY } = this;
      _cacheRow を $_cacheMap.get(行[一意のキー]);
      戻る （
        _cacheRow &&
        _cacheRow[DIFF_CELL_KEY].includes(列.property) && {
          背景色: "#FDE2E2"
        }
      );
    }
  }
};
</スクリプト>

<style lang="scss" スコープ>
.diff-table-container {
  ディスプレイ: フレックス;
  align-items:flex-start;
  .el-table + .el-table {
    左マージン: 20px;
  }
}
</スタイル>

<テンプレート>
  <diff-table :data-group="[oldData, newData]" :columns="tableColumns" />
</テンプレート>

<スクリプト>
「./DiffTable.vue」からDiffTableをインポートします。

エクスポートデフォルト{
  名前: "インデックス",
  コンポーネント:
    差分テーブル
  },
  データ（） {
    戻る {
      古いデータ: [
        { id: 1、名前: "zhangsan1"、年齢: 23、住所: "zxczxczxc" }、
        { id: 2、名前: "zhangsan2"、年齢: 23.5、住所: "zxczxczxc" }、
        { id: 3、名前: "zhangsan34"、年齢: 23、住所: "zxczxczxc" }、
        { id: 4、名前: "zhangsan4"、年齢: 23、住所: "zxczxczxc" }、
        { id: 5、名前: "zhangsan5"、年齢: 23、住所: "zxczxczxc" }、
        { id: 6、名前: "zhangsan5"、年齢: 23、住所: "zxczxczxc" }
      ]、
      新しいデータ: [
        { id: 1、名前: "zhangsan1"、年齢: 23、住所: "zxczxczxc" }、
        { id: 2、名前: "zhangsan2"、年齢: 23、住所: "zxczxczxc" }、
        { id: 4、名前: "zhangsan4"、年齢: 23、住所: "住所 住所 住所" }、
        { id: 3、名前: "zhangsan3"、年齢: 23、住所: "zxczxczxc" }、
        { id: 5、名前: "zhangsan5"、年齢: 23、住所: "zxczxczxc" }、
        { id: 7、名前: "zhangsan5"、年齢: 23、住所: "zxczxczxc" }、
        { id: 8、名前: "zhangsan5"、年齢: 23、住所: "zxczxczxc" }
      ]、
      テーブル列: [
        { ラベル: "一意のID"、プロパティ: "ID" },
        { ラベル: "名前"、プロパティ: "名前" },
        { ラベル: "年齢"、プロパティ: "年齢" },
        { ラベル: "アドレス"、プロパティ: "アドレス" }
      ]
    };
  }
};
</スクリプト>