element ui表单验证坑

相信很多人的项目都有在使用element ui这套ui框架，因为真的很好用，但是再美好的东西也是存在缺点的，最近我司新开发的就在用这套ui框，其中表单验证占了很大一部分，element ui有自带的表单验证，非常方便我们使用，但是我们通常都会把数据量不大的编辑和新增用同一个表单显示，比如以下这个列表。

新增和编辑都在公用一个表单验证：

在新增或者编辑完前，我们肯定要清空表单来达到我们想要的效果 ，这个时候就会触发表单验证，页面就会报红，如下

这样的用户体验非常差，所以我们的解决办法是每次在打开模态框的时候都清空表单验证。代码如下：

this.adddialog = true // 打开模态框

this.clearFrom() // 清空数据

if (this.$refs['form']) {
     this.$refs['form'].resetFields()// 清空表单验证
}

 这样就彻底解决报红的尴尬啦