Detaillierte Erläuterung der Visualisierungskomponente mit Vue zum Vergleichen der Unterschiede zwischen zwei Datensätzen

Requisiten: {
  eindeutiger Schlüssel: {
    Typ: Zeichenfolge,
    Standard: „id“
  },
  Datengruppe: {
    Typ: Array,
    Validator: Wert => Wert.Länge === 2
  },
  Spalten: {
    Typ: Array,
    erforderlich: true
  }
}

<Vorlage>
  <div Klasse="Diff-Tabellencontainer">
    <el-Tabelle
      v-for="(Daten, i) in abgeschlossenenDaten"
      :Schlüssel="i"
      :data="Daten"
      :row-style="Zeilenstile markieren"
      :cell-style="Zellenstile markieren"
    >
      <el-table-column v-for="Element in Spalten" :key="`${i}${item.prop}`" align="center" v-bind="Element" />
    </el-Tabelle>
  </div>
</Vorlage>

<style lang="scss" scoped>
.diff-Tabellencontainer {
  Anzeige: Flex;
  Elemente ausrichten: Flex-Start;
  .el-Tabelle + .el-Tabelle {
    Rand links: 20px;
  }
}
</Stil>

Daten() {
  zurückkehren {
    DIFF_CELL_KEY: Symbol("diffCells"), // Ein Array, das die Namen von Zellen mit Unterschieden speichert COMPLETED_KEY: Symbol("completed") // Markiert die abgeschlossene Verarbeitung };
}

Methoden: {
  // Wenn nach der Verarbeitung keine Markierung vorhanden ist, bedeutet dies, dass sie nur in einem Datensatz erscheint, d. h. in neuen Daten markRowStyles({ row }) {
    zurückkehren (
      !Zeile[diesen.COMPLETED_KEY] && {
        Hintergrundfarbe: "#E1F3D8"
      }
    );
  },
  // Finde die im Cache der Map gespeicherten Zeilendaten basierend auf dem eindeutigen Schlüssel der aktuellen Zeile // Das ist dataGroup[0].find(item => item[uniqueKey] === row[uniqueKey])
  // Dann bestimmen, ob das DIFF_CELL_KEY-Array den Attributnamen der aktuellen Spalte enthält markCellStyles({ row, column }) {
    const { $_cacheMap, uniqueKey, DIFF_CELL_KEY } = dies;
    const _cacheRow = $_cacheMap.get(row[uniqueKey]);
    zurückkehren (
      _cacheRow &&
      _cacheRow[DIFF_CELL_KEY].includes(Spalte.Eigenschaft) && {
        Hintergrundfarbe: "#FDE2E2"
      }
    );
  }
}

berechnet: {
  // Verarbeitung abgeschlossener Daten completedData({ dataGroup, uniqueKey, columns, DIFF_CELL_KEY, COMPLETED_KEY }) {
    // Dieser Schritt ist nicht erforderlich. Erstellen Sie gemäß den Geschäftsanforderungen eine tiefe Kopie, wenn die Originaldaten nicht geändert werden können. const _dataGroup = deepClone(dataGroup);
    // Map<string|number, object>, ich kenne mich mit TS nicht aus, es müsste so geschrieben werden, eigentlich ist es row[unique]: row
    const cacheMap = neue Map();
    // Zuerst den ersten Datensatz durchlaufen, das Array DIFF_CELL_KEY initialisieren und es dann in der Map speichern for (const _row of _dataGroup[0]) {
      _row[DIFF_CELL_KEY] = [];
      cacheMap.set(_row[eindeutiger Schlüssel], _row);
    }
    // Durchlaufe den zweiten Datensatz. Darin befindet sich eine weitere Schleife. Da nur die in den Spalten definierten Attribute verarbeitet werden, werden andere Attribute nicht verglichen für (const _row of _dataGroup[1]) {
      für (const { prop } von Spalten) {
        // Wenn es ein eindeutiger Schlüssel ist, überspringen Sie ihn direkt, if (prop === uniqueKey) continue;
        // Dieselben Daten aus dem Cache suchen const original = cacheMap.get(_row[uniqueKey]);
        // Wenn es nicht gefunden wird, bedeutet dies, dass diese Daten neu hinzugefügt wurden. Überspringen Sie einfach if (!original) continue;
        // Andernfalls setzen Sie eine Markierung in die beiden Datensätze, um anzuzeigen, dass sie verarbeitet wurden und nicht neu hinzugefügt wurden_row[COMPLETED_KEY] = true;
        original[COMPLETED_KEY] = wahr;
        // Vergleichen Sie abschließend die beiden Eigenschaftswerte. Wenn sie gleich sind, übertragen Sie sie in das Array DIFF_CELL_KEY. // Beachten Sie, dass das Array DIFF_CELL_KEY nur im ersten Datensatz vorhanden ist. // Da etwaige Unterschiede in allen Tabellen angezeigt werden, müssen sie nicht in jedem Datensatz gespeichert werden. _row[prop] !== original[prop] && original[DIFF_CELL_KEY].push(prop);
      }
    }
    // Speichern Sie hier eine Kopie der Karte, da diese bei der Verarbeitung von Stilen verwendet wird. $_cacheMap = cacheMap;
    gibt _dataGroup zurück;
  }
}

<Vorlage>
  <div Klasse="Diff-Tabellencontainer">
    <el-Tabelle
      v-for="(Daten, i) in abgeschlossenenDaten"
      :Schlüssel="i"
      :data="Daten"
      :row-style="Zeilenstile markieren"
      :cell-style="Zellenstile markieren"
    >
      <el-table-column v-for="Element in Spalten" :key="`${i}${item.prop}`" v-bind="Element" align="center" />
    </el-Tabelle>
  </div>
</Vorlage>

<Skript>
Funktion deepClone(Wert) {
  // Hängt von der Anforderung ab, ob eine tiefe Kopie erstellt werden soll. return val;
}

Standard exportieren {
  Name: "DiffTable",
  Requisiten: {
    eindeutiger Schlüssel: {
      Typ: Zeichenfolge,
      Standard: „id“
    },
    Datengruppe: {
      Typ: Array,
      Validator: Wert => Wert.Länge === 2
    },
    Spalten: {
      Typ: Array,
      erforderlich: true
    }
  },
  Daten() {
    zurückkehren {
      DIFF_CELL_KEY: Symbol("diffCells"),
      COMPLETED_KEY: Symbol("abgeschlossen")
    };
  },
  berechnet: {
    completedData({ Datengruppe, eindeutiger Schlüssel, Spalten, DIFF_CELL_KEY, COMPLETED_KEY }) {
      const _dataGroup = deepClone(dataGroup);
      const cacheMap = neue Map();
      für (const _row von _dataGroup[0]) {
        _row[DIFF_CELL_KEY] = [];
        cacheMap.set(_row[eindeutiger Schlüssel], _row);
      }
      für (const _row von _dataGroup[1]) {
        für (const { prop } von Spalten) {
          wenn (prop === uniqueKey) fortfahren;
          const original = cacheMap.get(_row[uniqueKey]);
          wenn (!original) fortfahren;
          _row[COMPLETED_KEY] = wahr;
          original[COMPLETED_KEY] = wahr;
          _row[Eigenschaft] !== original[Eigenschaft] && original[DIFF_CELL_KEY].push(Eigenschaft);
        }
      }
      dies.$_cacheMap = cacheMap;
      gibt _dataGroup zurück;
    }
  },
  Methoden: {
    markRowStyles({ Zeile }) {
      zurückkehren (
        !Zeile[diesen.COMPLETED_KEY] && {
          Hintergrundfarbe: "#E1F3D8"
        }
      );
    },
    markCellStyles({ Zeile, Spalte }) {
      const { $_cacheMap, uniqueKey, DIFF_CELL_KEY } = dies;
      const _cacheRow = $_cacheMap.get(row[uniqueKey]);
      zurückkehren (
        _cacheRow &&
        _cacheRow[DIFF_CELL_KEY].includes(Spalte.Eigenschaft) && {
          Hintergrundfarbe: "#FDE2E2"
        }
      );
    }
  }
};
</Skript>

<style lang="scss" scoped>
.diff-Tabellencontainer {
  Anzeige: Flex;
  Elemente ausrichten: Flex-Start;
  .el-Tabelle + .el-Tabelle {
    Rand links: 20px;
  }
}
</Stil>

<Vorlage>
  <diff-table :data-group="[alteDaten, neueDaten]" :columns="Tabellenspalten" />
</Vorlage>

<Skript>
importiere DiffTable aus "./DiffTable.vue";

Standard exportieren {
  Name: "Index",
  Komponenten:
    DiffTabelle
  },
  Daten() {
    zurückkehren {
      alteDaten: [
        { ID: 1, Name: "zhangsan1", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 2, Name: "zhangsan2", Alter: 23,5, Adresse: "zxczxczxc" },
        { ID: 3, Name: "zhangsan34", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 4, Name: "zhangsan4", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 5, Name: "zhangsan5", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 6, Name: "zhangsan5", Alter: 23, Adresse: "zxczxczxc" }
      ],
      neueDaten: [
        { ID: 1, Name: "zhangsan1", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 2, Name: "zhangsan2", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 4, Name: "zhangsan4", Alter: 23, Adresse: "Adresse Adresse Adresse" },
        { ID: 3, Name: "zhangsan3", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 5, Name: "zhangsan5", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 7, Name: "zhangsan5", Alter: 23, Adresse: "zxczxczxc" },
        { ID: 8, Name: "zhangsan5", Alter: 23, Adresse: "zxczxczxc" }
      ],
      Tabellenspalten: [
        { label: "eindeutige ID", prop: "id" },
        { Bezeichnung: "Name", Eigenschaft: "Name" },
        { label: "Alter", prop: "Alter" },
        { label: "Adresse", prop: "Adresse" }
      ]
    };
  }
};
</Skript>