问题描述
由于我将编辑与新增时，表单使用的是同一个data中的数据，这就导致出现了我点击了编辑后，再次点击新增时，出现了数据依旧是刚才编辑表单中的数据。
解决办法
尝试一（不推荐）
通过手动给表单中的字段赋值，期初时，能达到清除表单的效果，但是又出现了新的问题。
表单验证不通过。在一打开对话框时，就默认触发了表单的验证规则。
查阅Element-UI官方文档，可以发现有有清除验证的方法clearValidate。
只需将该方法写上，即可。
if (this.$refs.studentInfoRef) {
this.$nextTick(() => {
this.$refs.studentInfoRef.clearValidate();
});
}
尝试二（推荐）
查阅Element-UI官方文档可以发现，官方提供了一个重置表单的resetFields()方法。
但发现调用Element-UI官方提供的resetFields()方法并未生效。甚至还出现了以下错误Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"。不急，有解决办法。
出现上述情况，尝试用网络上普遍认为的错误（很可能是起作用的生命周期不一致）解决办法来解决。这时我们先将调用这个方法放到this.$nextTick中。
但是问题依旧存在。
阅读这个问题，可以知道，说的是这个未定义。好吧，可能还是生效的时间不对，那我就加一个条件判断，让这个存在时在去执行。
if (this.$refs.studentInfoRef) {
this.$nextTick(() => {
this.$refs.studentInfoRef.resetFields();
});
}
发现问题得到了解决。这时有可能是浏览器缓存的问题，还需要做的操作是需要再表单上添加@close方法。在关闭时清除清除表单，在打开时清除表单验证，这个比较靠谱的一个解决办法。
总结
在使用Element-UI重置表单的方式时，一定要记住，表单中的prop属性不要漏掉。
文章来源：https://www.toymoban.com/news/detail-541033.html
在查看方法使用时，并未提到prop这个属性，但继续往下阅读文档，就会发现，这个属性是必须的。
注意prop属性值需要与model中的值一致。
注意： 在this.$refs.studentInfoRef.resetFields();这一句话中，studentInfoRef需要与表单中的ref一致，且不能去其他的ref重名。文章来源地址https://www.toymoban.com/news/detail-541033.html
到了这里，关于解决Element-UI清空表单及验证不生效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
