编辑弹窗数据回显时,关闭弹窗后再次打开弹窗时数据就不回显了?-灵析社区

希望奇迹发生_1

添加和编辑共用的一个弹窗,编辑时做数据回显,第一次打开弹窗数据可以正常的回显出来,关闭后再次打开的时候弹窗的表单就显示为空了,就没有数据回显了 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/6eec07ec54c2e86b3c885fa6e1a41ba6.png) 上面是父组件里面的打开编辑弹窗和赋值当前行数据 下面是弹窗组件里面的点击保存的方法 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/964eb3153797959f7a067c1158e29ccc.png) save() { this.loading = true const saveOrUpdate = this.isUpdate ? updataLibrary : addLibrary saveOrUpdate(this.dataForm) .then((msg) => { this.loading = false this.$message.success(msg) this.updateVisible(false) this.$emit('done') }) .catch((e) => { this.loading = false this.$message.error(e.message) }) }, 然后使用了watch监听弹窗的状态 watch: { visible(visible) { if (visible) { if (this.Rowdata) { setTimeout(() => { this.$util.assignObject(this.dataForm, { ...this.Rowdata, }) }, 100) this.isUpdate = true } else { this.isUpdate = false } } else { // this.$refs.form.clearValidate() this.dataForm = { ...this.defaultForm } } } } 打印当前行的数据也能打印出来没有问题。编辑回显的时候就出问题了,第二次打开弹窗的时候就没有回显数据了,是因为watch里面this.dataForm = { ...this.defaultForm }这个原因吗? 请问这个问题具体应该怎么解决呢?

阅读量:291

点赞量:12

问AI
这种情况出现的原因一般是因为你一次编辑修改了"this.Rowdata",原因就是浅克隆,解决方法就是把下面的代码改一下: this.$util.assignObject(this.dataForm, { ...this.Rowdata, }) const deepClone = (obj) => JSON.parse(JSON.stringify(obj)); this.$util.assignObject(this.dataForm, deepClone(this.Rowdata))