Detailed explanation of the visualization component using Vue to compare the differences between two sets of data

props: {
  uniqueKey: {
    type: String,
    default: "id"
  },
  dataGroup: {
    type: Array,
    validator: val => val.length === 2
  },
  columns: {
    type: Array,
    required: true
  }
}

<template>
  <div class="diff-table-container">
    <el-table
      v-for="(data, i) in completedData"
      :key="i"
      :data="data"
      :row-style="markRowStyles"
      :cell-style="markCellStyles"
    >
      <el-table-column v-for="item in columns" :key="`${i}${item.prop}`" align="center" v-bind="item" />
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.diff-table-container {
  display: flex;
  align-items:flex-start;
  .el-table + .el-table {
    margin-left: 20px;
  }
}
</style>

data() {
  return {
    DIFF_CELL_KEY: Symbol("diffCells"), // An array that stores the names of cells with differences COMPLETED_KEY: Symbol("completed") // Marks the completed processing };
}

methods: {
  // After processing, if there is no mark, it means that it only appears in one set of data, that is, new data markRowStyles({ row }) {
    return (
      !row[this.COMPLETED_KEY] && {
        backgroundColor: "#E1F3D8"
      }
    );
  },
  // Find the row data cached in the map based on the unique key of the current row // That is dataGroup[0].find(item => item[uniqueKey] === row[uniqueKey])
  // Then determine whether the DIFF_CELL_KEY array contains the attribute name of the current column markCellStyles({ row, column }) {
    const { $_cacheMap, uniqueKey, DIFF_CELL_KEY } = this;
    const _cacheRow = $_cacheMap.get(row[uniqueKey]);
    return (
      _cacheRow &&
      _cacheRow[DIFF_CELL_KEY].includes(column.property) && {
        backgroundColor: "#FDE2E2"
      }
    );
  }
}

computed: {
  // Processing completed data completedData({ dataGroup, uniqueKey, columns, DIFF_CELL_KEY, COMPLETED_KEY }) {
    // This step is not necessary. According to business requirements, if the original data cannot be modified, make a deep copy const _dataGroup = deepClone(dataGroup);
    // Map<string|number, object>, I am not familiar with TS, it should be written like this, actually it is row[unique]: row
    const cacheMap = new Map();
    // First traverse the first set of data, initialize the DIFF_CELL_KEY array, and then store it in the map for (const _row of _dataGroup[0]) {
      _row[DIFF_CELL_KEY] = [];
      cacheMap.set(_row[uniqueKey], _row);
    }
    // Traverse the second set of data. There is another loop inside. Because only the attributes defined in columns are processed, other attributes are not compared for (const _row of _dataGroup[1]) {
      for (const { prop } of columns) {
        // If it is a unique key, skip it directly if (prop === uniqueKey) continue;
        // Find the same data from the cache const original = cacheMap.get(_row[uniqueKey]);
        // If it is not found, it means that this data is newly added, just skip if (!original) continue;
        // Otherwise, put a mark in the two sets of data to indicate that they have been processed and not newly added_row[COMPLETED_KEY] = true;
        original[COMPLETED_KEY] = true;
        // Finally, compare the two property values. If they are the same, push them into the DIFF_CELL_KEY array. // Note that the DIFF_CELL_KEY array only exists in the first set of data. // Because any differences will be displayed in all tables, there is no need to store them in every set of data. _row[prop] !== original[prop] && original[DIFF_CELL_KEY].push(prop);
      }
    }
    // Save a copy of the map to this, because this will be used when processing styles.$_cacheMap = cacheMap;
    return _dataGroup;
  }
}

<template>
  <div class="diff-table-container">
    <el-table
      v-for="(data, i) in completedData"
      :key="i"
      :data="data"
      :row-style="markRowStyles"
      :cell-style="markCellStyles"
    >
      <el-table-column v-for="item in columns" :key="`${i}${item.prop}`" v-bind="item" align="center" />
    </el-table>
  </div>
</template>

<script>
function deepClone(val) {
  // Depends on the requirement whether to make a deep copy return val;
}

export default {
  name: "DiffTable",
  props: {
    uniqueKey: {
      type: String,
      default: "id"
    },
    dataGroup: {
      type: Array,
      validator: val => val.length === 2
    },
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      DIFF_CELL_KEY: Symbol("diffCells"),
      COMPLETED_KEY: Symbol("completed")
    };
  },
  computed: {
    completedData({ dataGroup, uniqueKey, columns, DIFF_CELL_KEY, COMPLETED_KEY }) {
      const _dataGroup = deepClone(dataGroup);
      const cacheMap = new Map();
      for (const _row of _dataGroup[0]) {
        _row[DIFF_CELL_KEY] = [];
        cacheMap.set(_row[uniqueKey], _row);
      }
      for (const _row of _dataGroup[1]) {
        for (const { prop } of columns) {
          if (prop === uniqueKey) continue;
          const original = cacheMap.get(_row[uniqueKey]);
          if (!original) continue;
          _row[COMPLETED_KEY] = true;
          original[COMPLETED_KEY] = true;
          _row[prop] !== original[prop] && original[DIFF_CELL_KEY].push(prop);
        }
      }
      this.$_cacheMap = cacheMap;
      return _dataGroup;
    }
  },
  methods: {
    markRowStyles({ row }) {
      return (
        !row[this.COMPLETED_KEY] && {
          backgroundColor: "#E1F3D8"
        }
      );
    },
    markCellStyles({ row, column }) {
      const { $_cacheMap, uniqueKey, DIFF_CELL_KEY } = this;
      const _cacheRow = $_cacheMap.get(row[uniqueKey]);
      return (
        _cacheRow &&
        _cacheRow[DIFF_CELL_KEY].includes(column.property) && {
          backgroundColor: "#FDE2E2"
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.diff-table-container {
  display: flex;
  align-items:flex-start;
  .el-table + .el-table {
    margin-left: 20px;
  }
}
</style>

<template>
  <diff-table :data-group="[oldData, newData]" :columns="tableColumns" />
</template>

<script>
import DiffTable from "./DiffTable.vue";

export default {
  name: "Index",
  components:
    DiffTable
  },
  data() {
    return {
      oldData: [
        { id: 1, name: "zhangsan1", age: 23, address: "zxczxczxc" },
        { id: 2, name: "zhangsan2", age: 23.5, address: "zxczxczxc" },
        { id: 3, name: "zhangsan34", age: 23, address: "zxczxczxc" },
        { id: 4, name: "zhangsan4", age: 23, address: "zxczxczxc" },
        { id: 5, name: "zhangsan5", age: 23, address: "zxczxczxc" },
        { id: 6, name: "zhangsan5", age: 23, address: "zxczxczxc" }
      ],
      newData: [
        { id: 1, name: "zhangsan1", age: 23, address: "zxczxczxc" },
        { id: 2, name: "zhangsan2", age: 23, address: "zxczxczxc" },
        { id: 4, name: "zhangsan4", age: 23, address: "Address Address Address" },
        { id: 3, name: "zhangsan3", age: 23, address: "zxczxczxc" },
        { id: 5, name: "zhangsan5", age: 23, address: "zxczxczxc" },
        { id: 7, name: "zhangsan5", age: 23, address: "zxczxczxc" },
        { id: 8, name: "zhangsan5", age: 23, address: "zxczxczxc" }
      ],
      tableColumns: [
        { label: "unique id", prop: "id" },
        { label: "name", prop: "name" },
        { label: "age", prop: "age" },
        { label: "address", prop: "address" }
      ]
    };
  }
};
</script>