效果：
步骤一、
vue2修改表单提交的时候，只将修改的数据的字段传给后端接口，没有修改得数据不传参给接口。
- 在
data对象中添加一个新的属性，用于存储初始表单数据的副本，与当前表单数据进行比较，找出哪些字段发生了变化。
const originalFormData = ref({});
// 或者 originalForm: {}, // 增加原始数据对象
步骤二、
打开修改客户信息的对话框时（在
handleUpdate函数中），保存当前表单数据的副本到originalFormData。需要在修改操作时，将当前行的原始数据存储起来，以便后续比较是否修改。可以在handleUpdate方法中添加如下代码：
/** 修改按钮操作 */
function handleUpdate(row) {
// 使用当前行的数据填充表单
form.value = { ...row };
form.value.states = row.states === "0" ? "0" : "1";
originalData.value = { ...row }; // 存储原始数据
open.value = true;
title.value = "修改标签";
}代码对比
步骤三、
修改
submitForm函数，在提交表单数据之前，比较当前表单数据与原始数据，构建一个只包含更改过的字段的对象。
/** 提交按钮 */
function submitForm() {
proxy.$refs["tagRef"].validate((valid) => {
if (valid) {
// 表单校验通过，执行提交操作
let submitData = {};
if (form.value.id != null) {
// 修改操作
// 遍历form对象，找出修改过的字段
for (let key in form.value) {
if (key !== 'id' && form.value[key] !== null && form.value[key] !== undefined) {
// 这里假设原始数据存储在原始对象originalData中，用于比较是否修改
if (form.value[key] !== originalData.value[key]) {
submitData[key] = form.value[key];
}
}
}
submitData.id = form.value.id; // id字段必须传递
updateTag(submitData)
.then((response) => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
})
.catch((error) => {
proxy.$message.error(error.message);
});
} else {
// 新增操作，直接传递整个表单数据
addTag(form.value)
.then((response) => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
})
.catch((error) => {
proxy.$message.error(error.message);
});
}
} else {
proxy.$message.error("表单中有未填写正确的项，请检查后再次提交。");
}
});
}更改前后对比：
