Vue只提交表单中被修改的部分

需求

在提交表单使用http的put请求进行数据更新时，只提交表单中被修改的数据，而不是提交整个表单

解决

• 获取表单数据时clone一份作为原始数据rawData
• 在提交表单前将表单数据 formData 和 rawData 的数据进行比较
• 将差异存放到新的对象 diffData 中，在提交表单时提交就行了

实现（部分代码）

template中的代码

<template>
  <el-form ref="formRef" :model="form">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
     </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="form.address"></el-input>
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="updateInfo">保存修改</el-button>
    </el-form-item>
  </el-form>
</template>

script中的代码

<script>
export default {
  data () {
    return {
      form: {},		// 表单数据
      rawData: '',	// 获取表单时clone的原始数据
      diffData: ''	// 差异
    }
  },
  created () {
    this.getFormData()
  },
  methods: {
    // 获取数据的方法
    async getFormData () {
      const { data: res } = await this.$http.get('user')
      ..........
      this.form = res.data              // 表单数据
      this.rawData = { ...res.data }    // 原始数据
    },
    // 比较差异的方法
    diffFormData () {
      for (let k in this.rawData) {
        if (this.rawData[k] !== this.form[k]) {
          if (!this.diffData) {
            this.diffData = {}
          }
          this.diffData[k] = this.form[k]
        }
      }
    },
    // 提交更新数据的方法
    updateInfo () {
      //先比对差异赋值给diffData,如果diffData为空则不用提交，不为空则进行提交
      this.diffFormData()
      if (!this.diffData) {
        this.$message.error('未修改任何数据，无需提交')
      } else {
        this.$refs.formRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.put('user', this.diffData)
          ........
        })
      }
    }
  }
}
</script>