vue2修改表单只提交被修改的数据的字段传给后端接口

效果：

步骤一、

vue2修改表单提交的时候，只将修改的数据的字段传给后端接口，没有修改得数据不传参给接口。

1. 在 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("表单中有未填写正确的项，请检查后再次提交。");}});
}

更改前后对比：