前言
在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"
}
]