表格中编辑后进行数据比较的方法介绍-比较两套数据

前言

在vue+element项目中有设计到到表格中修改数据需求，虽然采用弹窗的方式，在表单中进行数据修改比较常见，而且可以修改更多字段验证。但少数情况下也可以做成直接在表格上编辑。如果数据量大的时候，就需要判断哪些记录做了修改，把修改的数据传给后端。
判断的方式可以在字段上加修改标识证明这条数据被修改了。另一种就是备份一份数据，最后两个数据做比较。看具体的业务场景可以选择不同的方式。

业务场景

这里我最后判断两份数据是否一样，筛选出修改过的传给后端。
因为业务场景中有需要涉及表格的行拖动，就是拖动行来修改优先级。在tableData上表现的是记录的顺序变了。所以考虑到其他原因我选择提交前比较两份数据的差异。

代码实现

这有两份数据。t2是原本后端传来的数据。先做一个深拷贝存起来。
t1是修改过的数据，包括了顺序和值的修改。
我要做的是比较两个数据是不是修改了值和顺序，并返回修改过的记录。并且将优先级的值修改。

vart1 = [{
      yxj: 1, // 优先级
      sfqy: '001 ',
  }, {
      yxj: 2,
      sfqy: '002 ',
  }, {
      yxj: 4,
      sfqy: '004 ',
  }, {
      yxj: 3,
      sfqy: '003',
  }];
  var t2 = [{
      yxj: 1, // 优先级
      sfqy: '001 ',
  }, {
      yxj: 2,
      sfqy: '002 ',
  }, {
      yxj: 3,
      sfqy: '003',
  }, {
      yxj: 4,
      sfqy: '004 ',
  }]

下代码中就用了两层遍历，进行比较。

  function compareTableData({ data, originData, isUseStrict, diffFn }) {
      var changedRows = [];
      data.map((e, i) => {
          var changedState = {
              state: false
          };
          for (const k in e) {
              if (isUseStrict && Object.hasOwnProperty.call(e, k) && originData[i][k] !== e[k]) {
                  changedState.state = true
                  diffFn && diffFn(e, originData[i])
                  break;
              }
              if (!isUseStrict && Object.hasOwnProperty.call(e, k) && originData[i][k] != e[k]) {
                  changedState.state = true
                  diffFn && diffFn(e, originData[i])
                  break;
              }
          };
          if (changedState.state) {
              changedRows.push(e)
          }
      })
      return changedRows;
  }
 

示例和结果

在diffFn（如果出现不同的记录时执行）中交换了两个的优先级字段。
这样封装在于可以用于在提交之前做一些操作。
将不变的部分和可变的部分分离。使其适应更多需求。

 console.log(compareTableData({
      data: t1, originData: t2, diffFn: (r1, r2) => {
          r1['yxj'] ^= r2['yxj']
          r2['yxj'] ^= r1['yxj']
          r1['yxj'] ^= r2['yxj']
      }
  }))
  
// 结果
[
    {
        "yxj": 3,
        "sfqy": "004 "
    },
    {
        "yxj": 4,
        "sfqy": "003"
    }
]