• 单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据(深拷贝)


    要实现在表单中的部分字段失去焦点后,将数据还原为进入弹窗时的接口数据,可以在进入弹窗时将接口数据保存为一个备份,然后在失去焦点的事件处理函数中将字段值设置为备份数据中相应字段的值。

    如果 this.form.originalData 的值被同步修改,原因可能是因为 JavaScript 中的对象是引用类型。当你将一个对象赋值给另一个变量时,实际上是将引用地址赋值给了新变量,而不是复制对象本身。所以在这种情况下,如果你直接修改 this.form.originalData 中的字段,那么 this.form 中对应的字段也会被修改,因为它们引用的是同一个对象。

    为了避免这个问题,你可以使用深拷贝来创建 this.form.originalData 的备份,确保备份和原始数据是两个独立的对象。

    在Vue.js中,你可以使用 JSON.parse(JSON.stringify(object)) 来进行深拷贝。修改示例代码如下:

    1. <el-form-item label="相机增益(db)" prop="cameraGain" label-width="100px">
    2. <el-input v-model="form.cameraGain" placeholder="请输入参数键名"
    3. @blur="handleBlurCameraGain" />
    4. </el-form-item>
    5. data() {
    6. return {
    7. form: {
    8. cameraGain: '',
    9. originalData: {
    10. cameraGain: '' // 进入弹窗时的接口数据备份
    11. }
    12. },
    13. };
    14. },

    1. mounted() {
    2. // 模拟获取接口数据并保存为备份数据
    3. this.getFormData().then(response => {
    4. this.form = response.data; //原数据
    5. this.form.originalData = JSON.parse(JSON.stringify(response.data)); //备份
    6. });
    7. },
    1. handleBlurCameraGain() {
    2. // 在失去焦点的事件处理函数中将字段值还原为备份数据中的值
    3. this.form.cameraGain = this.form.originalData.cameraGain;
    4. },

    通过使用 JSON.parse(JSON.stringify(response.data)) 对数据进行深拷贝,确保备份数据和原始数据是两个独立的对象。这样,当你修改备份数据的字段时,不会改变原始数据。

    请注意,JSON.parse(JSON.stringify(...)) 的方法对于大型复杂对象或包含非标准JSON数据的对象可能不适用。在这种情况下,你可能需要使用其他库或自定义函数来执行深拷贝操作。

  • 相关阅读:
    方圆的秒杀系统优化方案实战,(七)操作对缓存的更新
    Asp .Net Core 系列:Asp .Net Core 集成 NLog
    java计算机毕业设计个性化穿搭推荐系统MyBatis+系统+LW文档+源码+调试部署
    java计算机毕业设计网上扶贫农产品销售系统源代码+数据库+系统+lw文档
    leetcode 511 日期操作
    Ubuntu制作本地安装源
    如何选择合适的汽车芯片ERP系统?
    使用标准信号检测 VM振弦采集模块测量精度
    【PPT制作】基础篇
    cmake学习笔记2
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/133162762