如何拿表格修改和新增后的数据与最开始的数据做对比，并处理数据，让新增的数据id为0

本文链接：https://blog.csdn.net/Ace_Lilylv/article/details/143270776

我们需要对比改动的数据和原数据，找出哪些数据是新增的、哪些数据是修改的，并且删除的数据也需要处理。我们可以编写一个方法来实现这个逻辑。

实现步骤

对比原数据和改动的数据：
- 找出新增的数据（R_ID 为空或不存在于原数据中的数据）。
- 找出修改的数据（R_ID 存在于原数据中，但其他字段有变化）。
- 找出删除的数据（原数据中存在，但在改动的数据中不存在）。
生成最终的结果：
- 对于新增的数据，保持 R_ID 为空。
- 对于修改的数据，保持 R_ID 不变。
- 对于删除的数据，记录下来以便后续处理。

代码实现

data() {
  return {
    originalData: [
      { R_ID: '1', REC_NAME: 'test1', REC_EMAIL: ['666@qq.com'], CC_EMAIL: ['666cc@qq.com'], IS_SEND: '0', IS_VIRTUAL: '1', CUST_O_CODE: 'code1' },
      { R_ID: '2', REC_NAME: 'test2', REC_EMAIL: ['7772@qq.com', '777@qq.com'], CC_EMAIL: ['7772cc@qq.com', '777cc@qq.com'], IS_SEND: '1', IS_VIRTUAL: '1', CUST_O_CODE: 'code2' }
    ],
    formData: {
      fields: [
        { R_ID: '1', REC_NAME: 'test1', REC_EMAIL: ['666@qq.com'], CC_EMAIL: ['666cc@qq.com'], IS_SEND: '0', IS_VIRTUAL: '1', CUST_O_CODE: 'code1' },
        { R_ID: '4', REC_NAME: 'test2', REC_EMAIL: ['7772@qq.com', '777@qq.com'], CC_EMAIL: ['7772cc@qq.com', '777cc@qq.com'], IS_SEND: '1', IS_VIRTUAL: '1', CUST_O_CODE: 'code2' },
        { R_ID: '5', REC_NAME: 'test2', REC_EMAIL: ['7772@qq.com', '777@qq.com'], CC_EMAIL: ['7772cc@qq.com', '777cc@qq.com'], IS_SEND: '1', IS_VIRTUAL: '1', CUST_O_CODE: 'code2' }
      ]
    },
    rules: {
      REC_NAME: [{ required: true, message: '请输入接收人名称', trigger: 'blur' }],
      REC_EMAIL: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }],
      CC_EMAIL: [{ required: false, message: '请输入抄送人邮箱地址', trigger: 'blur' }]
    },
    deletedIds: [] // 用于存储删除的行的 rId
  };
},

methods: {
  getModifiedReports() {
    const originalById = new Map(this.originalData.map(item => [item.R_ID, item]));
    const modifiedById = new Map(this.formData.fields.map(item => [item.R_ID, item]));

    const result = [];

    // 处理新增和修改的数据
    this.formData.fields.forEach(item => {
      if (originalById.has(item.R_ID)) {
        // 比较是否有修改
        const originalItem = originalById.get(item.R_ID);
        const isModified = JSON.stringify(originalItem) !== JSON.stringify(item);
        if (isModified) {
          result.push({ ...item, isNew: false });
        }
      } else {
        // 新增的数据
        result.push({ ...item, R_ID: '', isNew: true });
      }
    });

    // 处理删除的数据
    this.originalData.forEach(item => {
      if (!modifiedById.has(item.R_ID)) {
        this.deletedIds.push(item.R_ID);
      }
    });

    return result;
  },

  handleSave() {
    const modifiedReports = this.getModifiedReports();
    console.log('Modified reports:', modifiedReports);
    console.log('Deleted IDs:', this.deletedIds);

    // 处理数据，例如发送到服务器
    modifiedReports.forEach(report => {
      if (report.isNew) {
        console.log('This is a new report:', report);
        // 发送新增数据到服务器
      } else {
        console.log('This is a modified report:', report);
        // 发送修改数据到服务器
      }
    });

    // 处理删除的数据
    this.deletedIds.forEach(id => {
      console.log('This report is deleted:', id);
      // 发送删除数据到服务器
    });
  }
}

说明

getModifiedReports 方法：
- 创建两个 Map 对象，分别存储原数据和改动的数据，以 R_ID 为键。
- 遍历 formData.fields，检查每条数据是否存在于原数据中：
  - 如果存在，比较是否有修改。如果有修改，将数据加入结果数组，并设置 isNew 为 false。
  - 如果不存在，表示是新增的数据，将 R_ID 置为空，并设置 isNew 为 true。
- 遍历 originalData，检查每条数据是否存在于改动的数据中。如果不存在，表示该数据被删除，将其 R_ID 加入 deletedIds 数组。
handleSave 方法：
- 调用 getModifiedReports 方法获取修改后的数据。
- 分别处理新增和修改的数据，并发送到服务器。
- 处理删除的数据，并发送到服务器。