今天做项目遇到一个问题 ,由于比较常见,故在此记录一下。
问题是这样的,使用elementUI在父组件上打开编辑弹窗,传值(对象或者数组)到子组件,在编辑页面修改原来的值由于v-model的绑定,我们修改是会直接影响原来的值,当我们取消编辑的时候,这个时候应该是数据变为未编辑之前的值,而当我们确定保存时,父组件中的数据应该是我们更新后的数据,怎么实现这个功能。
总的说就是修改了原数据更新,取消数据不更新
方法一:用深度拷贝
this.data=JSON.pase(JSON.stringify(row));
这样当我们在编辑页面(子组件)修改父组件传递过来的值时,就不会影响父组件的值,而当我们点击确认的时候,在更新完数据以后,再次查询,重新初始化父组件的数据,达到更新的目的。
方法二:表单重置
elementUI的表单组件有重置表单的方法:
this.$refs.formref.resetFields()
在我们点击取消时可以对表单重置
当然这种方法有好也有坏,好的时我们不用做多次的查询,不好的是当值被多次修改时,我们没办法控制重置后的数据就是我们需要的,造成数据不准确
两种方法感觉都不太好,不知道还有没有更好的方法,还望告知,感激不尽