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

前言

在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 = truediffFn && diffFn(e, originData[i])break;}if (!isUseStrict && Object.hasOwnProperty.call(e, k) && originData[i][k] != e[k]) {changedState.state = truediffFn && 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"}
]

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

Word文档粘贴的表格中文字有淡灰色背景的去除方法
直接从excel粘贴过来的表格特征: 无论怎么改字符的底色还是边框底纹都无法去除: 更改字符底纹,该底纹也没有变化: 更改各种格式样式都无法消除: 各种格式刷都不管用. 光标移到别处不会显示灰色背景 ...
教你在CAD中编辑标注尺寸界线的倾斜角的方法
在CAD中,对于完成的标注,还可以使用"编辑标注"命令对尺寸文字的角度.尺寸界线的倾斜角进行修改,接下来就以一个图形为例为大家介绍一下CAD中编辑标注尺寸界线的倾斜角的方法! 打开 ...
python可以实现哪些功能_Python中实现机器学习功能的四种方法介绍
本篇文章给大家带来的内容是关于Python中实现机器学习功能的四种方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在本文中,我们将介绍从数据集中选择要素的不同方法; 并使用S ...
mysql查看用户名_Mysql创建数据表的方法介绍（附示例）
本篇文章给大家带来的内容是关于Mysql创建数据表的方法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 数据表是数据库最重要的组成部分之一,是其他对象的基础.如果我们的 ...
mysql创建数据表示例_Mysql创建数据表的方法介绍（附示例）
本篇文章给大家带来的内容是关于Mysql创建数据表的方法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 数据表是数据库最重要的组成部分之一,是其他对象的基础.如果我们的 ...
java 获取键盘点击_Java中获取键盘输入值的三种方法介绍
程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...
表格中复制后出现空格_软件应用在Excel表格中怎样批量删除空格？
在日常办公中对于Excel的使用有没有全部掌握呢?怎样快速整理表格中的数据呢?这些都是职场必备技能,了解更多的Excel知识可以让你在数据管理,表格管理中游刃有余.下面为大家分享一些经常使用的Exce ...
Element—UI 表格中换页后序号不变的问题
问题情况:在表格中做出了分页功能后发现分页后的序号还是从1开始解决方法: <el-table-columnlabel="序号"type="index"w ...
行进中换轮胎——万字长文解析美团和大众点评两大数据平台是怎么融合的
点击上方"公众号"可以订阅哦本文根据作者在2017年ArchSummit的分享记录整理而成. 背景互联网格局复杂多变,大规模的企业合并重组不时发生.原来完全独立甚至相互竞争的两 ...

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

前言

业务场景

代码实现

示例和结果

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

最新文章

热门文章