当前位置：首页 > article >正文

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

article 2025/1/15 4:50:49

效果：

步骤一、

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

更改前后对比：