问题:
表单操作中resetFields()方法在编辑后再次新增操作时失效。
在开发过程中新增和编辑功能往往使用一个el-form,在新增完成时,执行 resetFields()方法(即:this.$refs[formName].resetFields();),这样再次打开页面时,不会保留原来的数据,但是先给form赋值执行编辑操作,完成时执行resetFields()方法,再次打开进行新增时,会发现数据依然存在,感觉像是resetFields()方法没有起作用。
原因:
el-form提供的resetField()方法不是将表单重置为空,而是将其重置为初始值。先执行编辑,其初始状态就是有值的,所以在编辑成功后执行的resetField()方法就是有值的,这样导致编辑成功后再次打开新增,el-form就不是空表单。
解决方法:
在执行编辑成功后对表单的数据进行清空操作,然后再执行resetField()方法。