首页弹窗表单数据变化，表格也变了

弹窗表单数据变化，表格也变了

时间: 2025-07-06 09:55:55 浏览: 10

### 如何确保弹窗表单数据更改时表格自动同步更新为了防止在编辑过程中，表单数据的变化直接影响到表格中的原始数据显示，可以采用深拷贝的方式处理数据。通过这种方式，可以在不影响原数据的情况下操作副本，只有当确认提交后才将新的数据应用回表格。对于 Vue.js 结合 Element UI 的场景下，可以通过 `JSON.parse(JSON.stringify())` 或者使用 Lodash 库里的 cloneDeep 方法来执行深拷贝[^5]： ```javascript // 使用 JSON 方式进行深拷贝 let deepCopyData = JSON.parse(JSON.stringify(originalData)); // 如果安装了 lodash 可以更方便地使用 _.cloneDeep 进行深拷贝 import _ from 'lodash'; let deepCopyData = _.cloneDeep(originalData); ``` 接着，在准备编辑某条记录之前，先对该记录做一次深拷贝作为临时存储的对象用于填充表单项；而在用户点击保存按钮之后再把最终修改后的值覆盖掉原来的那一项即可。另外需要注意的是，在实际开发中还需要考虑一些边界情况比如验证失败等情况下的回滚机制等问题。最后给出一个简单的例子说明上述思路的应用: ```javascript preEdit: function () { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定'}).then(() => {}); return; } // 对选中的数据进行深拷贝 let tempFormData = JSON.parse(JSON.stringify(this.selectData[0])); this.dialogFormVisible = true; this.addOrEdit = false; this.adjForm = tempFormData; }, saveChanges:function(){ // 假设 adjForm 是经过编辑后的对象 const index = this.tableData.findIndex(item=>item.id === this.adjForm.id); if(index!==-1){ Object.assign(this.tableData[index],this.adjForm); } } ```

阅读全文