Vue2实现表格增改删数据追踪并批量提交API方案咨询

思路一：维护原始数据快照，对比生成差异 #

因为数据是一次性加载完成的，初始化时对原始数据做深拷贝（比如用JSON.parse(JSON.stringify(original))或lodash的cloneDeep），存在组件的data中（如this.originalTableData）。

保存时遍历当前表格数据，通过唯一标识（如id）和原始快照对比：

• 新增项：当前数据中存在、但原始快照无对应id的条目
• 修改项：id匹配但字段值存在差异的条目
• 删除项：原始快照中存在、但当前数据已移除的条目

筛选出这三类数据后，按API要求的格式组合提交即可。提交成功后，更新原始快照为当前数据，确保下次对比准确。

思路二：为行数据添加状态标记 #

在渲染表格时，给每一行数据对象新增一个自定义状态字段（如_rowStatus），可选值：new/modified/deleted/unchanged。

• 新增行：创建行数据时直接标记_rowStatus: 'new'
• 修改行：监听行内输入/编辑事件，触发时将该行_rowStatus设为modified
• 删除行：不直接从数据数组中移除，而是标记_rowStatus: 'deleted'（或单独维护一个删除列表）

保存时，仅筛选出_rowStatus不为unchanged的条目，提交后重置状态或更新原始数据。

思路三：结合VeeValidate校验变更数据 #

无需用VeeValidate直接获取脏数据，而是在提交前针对上述筛选出的变更数据做校验：

• 对新增/修改的行，触发对应表单字段的VeeValidate校验
• 校验通过后再提交变更数据到API
• 若校验失败，定位到对应行提示用户修正

注意事项 #

• 深拷贝原始数据时，避免引用类型导致原始数据被意外修改
• 删除操作若采用软标记，提交成功后需从数据数组中移除对应条目
• 新增行可临时生成前端唯一标识，提交后用后端返回的真实ID替换

内容的提问来源于stack exchange，提问作者Rashid