表单验证问题

element中表单验证很简单，但是中也有坑，至于官方文档我也没找到解决办法，都是从网上和各路大神那里搜刮来的，其中有验证的坑下方图片中验证需要的属性其中第一个model和第三个ref为你表单的绑定数据第二个rules为你的验证规则

然后绑定prop属性值为你表单model的值

绑定事件

这里的传值为你的表单数据的对象

编写验证规则 我的较为简单所以只能这样，一个属性为一个验证规则，如果想要验证手机号或者其他的可以去问一下度娘，一大把，

事件 这里的form为事件本身传过来的，其中一个坑就是在这里，（_self是我自己定义的this防止调用不到this），

问题，至少目前的问题是这么节解决的，但是有时也是上面表单的必须属性忘记写也会报错所以仔细一点

表单清空和重置

重置这里就不说了，官网写的很详细可以CV大法，

重置的第二个方法，此问题仅以为我自己或者不会的提供方便，大神绕道， 首先我们的问题是在表单关闭的时候清空表单，这里的表单我使用的是element的对话框包裹的所以可以直接使用对话框的事件 这里我们可以使用关闭事件，

将重置事件方法到dialog关闭事件里面就可以达成关闭会后重置表单

上图中的nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，我加这个方法是因为我的resetFields（）方法报错，朋友说加这个就可以了

resetFields默认值

这里还有一个坑就是resetFields默认值问题

下图中的添加和编辑我用的是一个form框所以，这里会遇到一个问题，先进行编辑再新增，使用this.$refs[formName].resetFields();没有效果。 原因大概是因为，resetFields()方法只是将表单赋为初始值，表单的初始值是在mounted中赋给dom，也就是第一次渲染的时候。因此如果第一次是编辑，我将回显的信息赋值给表单，它就会认为这是初始值，所以不论怎么调用都会有种reset无效的感觉。

其实解决办法很多，

方法一（简单粗暴）：

使用$nextTick再执行赋值注意:这里的editobj变量是为了解除数据的双向绑定因为如果不这样做会出现你更改编辑框数据页面会立即同时发生变化(是在你没有点击确认更改的时候也就是说你一边改，页面一边发生变化)

本文章仅以自己防止忘记而记录，不管是我还是其他人，当你看到这篇文章的时候说明你还在从事前端工作，或者在学习前端，所以不管以后遇到什么问题，和挫折，都不要忘记你敲代码的初衷