在某一天,我遇到了这样的一个问题
图片
点击添加按钮弹出dialog弹窗,form表单输入后校验并将数据返回到table里
但是遇到的问题是,不论是let一个变量获取form表格数据permitItemForm去存入permitItems表格数据中,还是直接将permitItemForm存入permitItems中
table中的所有数据永远等于permitItemForm拥有的数据,并且本人这边还想在添加成功的时候重置表格,导致点击确认后,表格中数据条目增加,但是里边的数据为空
最后使用下边代码实现
const _this = this
this.$refs['permitItemForm'].validate((valid) => {
if (valid) {
this.Loading = this.$loading({
spinner: "",
text: "数据提交中...",
background: "rgba(0, 0, 0, 0.6)",
})
_this.permitItemForm.ROW_ID += 1
let itemForm = JSON.parse(JSON.stringify(this.permitItemForm))
_this.permitItems.push(itemForm)
console.log(_this.permitItems)
this.Loading.close()
this.innerVisible = false
} else {
this.$message.error('请输入必填项')
}
this.$refs['permitItemForm'].resetFields()
})
其实是使用了深拷贝的原理去实现的,之前方法不可以是因为他们使用浅拷贝,本质使用的是同一块内存,所以在使用elementui重置form表单数据的时候将permitItemForm清空