Element-UI 的 Form 组件提供了表单验证的功能，在单个的表单域上传递属性的验证规则，或者通过 rules 属性传入约定的验证规则，并将 Form-item 的 prop 属性设置为需要校验的字段名即可
使用this.$refs[formName].resetFields()就可以重置 Form 表单检验
这边项目根据选择的类型（单选）展示表单的不同内容，由于大部分内容一样，但是每种类型又有自己独有的控件，于是使用v-if来显隐控件，同时在切花类型时重置表单校验
但是页面能够正常显示，控制台一直报错，而且表单校验规则部分没有生效
[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'indexOf' of undefined"
这是由于DOM元素没有加载完导致的报错，于是把表单重置加上$nextTick
this.$nextTick(()=>{
this.$refs['ruleForm'].resetFields()
})
但是还是一如既往的在控制台报错，页面显示正常，不影响使用，只是控制台报错，但还是不能忍受，于是继续优化
之后将每种类型的 Form 表单单独摘出来，并没用。。。
之后的解决办法是将 v-if 改为 v-show
v-if 和 v-show 的区别
相同点
- 都是动态显示 DOM 元素
不同点
- v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；
- v-if 切换时有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只简单的基于 css 切换；
- v-if 是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译，同时编译被缓存，然后再切换的时候进行局部卸载；v-show 是在任何条件下（不管首次条件是否为真）都被编译，然后被缓存，同时 DOM 元素保留；
- v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
- v-if 适合运行条件不太可能改变；v-show 适合频繁切换；
注意
如果v-show作用的元素，css文件中display:none，通过v-show进行设置不能显示该元素；
原因：v-show 控制显隐，是通过 js 代码去修改元素的 element style，如果 value 为 false ，设置 display: none; 如果 value 为 true，设置 display: ''，于是 value 为 true 时，只能将element style 中的 display 效果清除，并不能覆盖 css 中的 display 效果。
tips: 当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在
<el-form>标签上添加@submit.native.prevent。
最终的解决办法是给 form 表单加上 key，每次切换类型的时候 key 值也是在变化，于是又将 v-show 改回 v-if，因为有表单非空校验
vue 中 key 的作用
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
