vue form表单对比差异

最新推荐文章于 2025-04-28 16:33:22 发布

smileNano

最新推荐文章于 2025-04-28 16:33:22 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/smileNano/article/details/120177153

本文探讨了一种表单数据比较方法，通过diffFormData函数实现原始数据与当前数据的逐项对比，仅当有差异时将更新的值存储在diffData中。提交策略仅在diffData非空时触发，确保用户只提交真正已修改的数据。

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

diffData: '',	// 差异

this.compiles = res.data.data[0]         当前数据
this.rawData = {...res.data.data[0]}    // 原始数据

 // 比较差异的方法
    diffFormData () {
      for (let k in this.rawData) {
        if (this.rawData[k] !== this.compiles[k]) {
          if (!this.diffData) {
            this.diffData = {}
          }
          this.diffData[k] = this.compiles[k]
        }
      }
    },

// 表单提及
     submitClicks() {
      const that = this
      //先比对差异赋值给diffData,如果diffData为空则不用提交，不为空则进行提交
      this.diffFormData()
      if (!this.diffData) {
        this.$message.error('未修改任何数据，无需提交')
      }
}

关注博主即可阅读全文