相信很多人的项目都有在使用element ui这套ui框架,因为真的很好用,但是再美好的东西也是存在缺点的,最近我司新开发的就在用这套ui框,其中表单验证占了很大一部分,element ui有自带的表单验证,非常方便我们使用,但是我们通常都会把数据量不大的编辑和新增用同一个表单显示,比如以下这个列表。
新增和编辑都在公用一个表单验证:
在新增或者编辑完前,我们肯定要清空表单来达到我们想要的效果 ,这个时候就会触发表单验证,页面就会报红,如下
这样的用户体验非常差,所以我们的解决办法是每次在打开模态框的时候都清空表单验证。代码如下:
this.adddialog = true // 打开模态框
this.clearFrom() // 清空数据
if (this.$refs['form']) {
this.$refs['form'].resetFields()// 清空表单验证
}
这样就彻底解决报红的尴尬啦