前端进行数据或表格修改时仅上传修改过的字段

最新推荐文章于 2025-07-31 15:34:48 发布

ZhongruiRao

最新推荐文章于 2025-07-31 15:34:48 发布

阅读量438

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端状态模式

本文链接：https://blog.youkuaiyun.com/qq_26123545/article/details/136562893

本文介绍了一种使用Vue3和TypeScript的前端开发策略，通过利用Reactivity和Ref来实现数据修改时，仅上传被修改的字段，从而减少数据传输压力。作者详细展示了如何定义数据结构、处理弹出修改框前的逻辑以及上传逻辑的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 概要
- 技术方案

概要

项目背景：
前端：vue3、ts
需求：
在写前端的数据修改部分时，仅需要上传修改过的字段，对于未修改的字段不予已上传，这样能减轻数据传输的压力

技术方案

数据结构定义

const formFields={
  f1: "",
  f2: "",
  f3: ""
}

const formData = reactive(JSON.parse(JSON.stringify(formFields)));
const originalForm = ref({})

弹出修改框前的逻辑：

const handleUpdate = (row: any) => {
  currentUpdateId.value = row.id
  const keys = ["f1", "f2", "f3"];
  keys.forEach(key => {
    formData[key] = row[key];
  });
  originalForm.value = JSON.parse(JSON.stringify(formData))
  dialogVisible.value = true
}

上传逻辑：

 // 判断修改过的字段
        const changes = Object.keys(formData).reduce((acc, key) => {
          if (JSON.stringify(formData[key]) !== JSON.stringify(originalForm.value[key])) {
            acc[key] = formData[key]
          }
          return acc
        }, {})
        // 添加id
        changes.id = currentUpdateId.value

        updateObject(changes)
            .then(() => {
              ElMessage.success("修改成功")
              getTableData()
              dialogVisible.value = false
            })
            .finally(() => {

            })