vue3.0修改表单生成修改前后详细日志（对比表单对象修改前后的值并且展示出修改前和修改后的值）

最新推荐文章于 2025-04-22 14:43:27 发布

造梦者FZ

最新推荐文章于 2025-04-22 14:43:27 发布

阅读量2.7k

点赞数 3

分类专栏： vue javascript简单入门案例文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43923146/article/details/130007543

版权

vue 同时被 2 个专栏收录

80 篇文章

订阅专栏

javascript简单入门案例

23 篇文章

订阅专栏

文章介绍了如何在Vue3.0中记录并展示表单修改日志。通过定义oldFormState和newFormState两个对象来保存表单修改前后的状态，点击修改按钮获取数据并保存，使用compareObjects函数对比新旧对象的不同，最后展示修改内容。在提交时，更新newFormState并记录变更详情。

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

vue3.0修改表单生成修改前后详细日志（对比表单对象修改前后的值并且展示出修改前和修改后的值）

话不多说先上效果：

在这里插入图片描述
1、定义两个对象用于保存比较判断修改前后FormState值的变化

 //用于保存比较判断修改前后FormState值的变化
  const oldFormState = ref<any>({})
  const newFormState = ref<any>({})

2、点击修改按钮打开页面获取数据时将获取的数据保存起来

 // 获取页面数据
  async function getData() {
    let res: any = await getJurisdiction({ id: props.propsData.id })
    if (res.code === 20000) {
      let obj = { ...res?.data }
      oldFormState.value = { ...obj }  //<-----------------这里
      formState.value = obj
    } else {
      message.error(res.msg)
    }
  }

3、写个对比修改前后两个对象的方法

  // 定义一个比较函数
  function compareObjects(obj1: any, obj2: any) {
    // 定义一个空数组用于存储不同的属性值
    var diff: any = []
    for (var key in obj1) {
      // 如果属性值不同，则将该属性和obj1和obj2的值存入diff对象
      if (obj1[key] !== obj2[key]) {
        diff.push({ left: obj1[key], right: obj2[key] })
      }
    }
    return diff
  }

4、将提交的数据用newFormState暂停起来

 newFormState.value = param //将提交的数据用newFormState暂停起来
 let arr = compareObjects(oldFormState.value, newFormState.value) // 执行上面对比两个对象的方法
  let content = ''
  arr.forEach((item: any) => {
    item.left = item.left ? item.left : '空'
    item.right = item.right ? item.right : '空'
    content += `将 ${item.left} 修改为了 ${item.right}，`
  })
  content = content.substring(0, content.length - 1)//去掉最后一个逗号
  console.log(content, 'content')
 let res: any = await updateJurisdiction(param)
 if (res.code === 20002) {
    message.success(res.msg)
     handleCancel()
    } else {
      message.error(res.msg)
    }