新建和编辑共用一个表单，编辑之后新建，form表单resetFields失效

新建和编辑共用一个表单，编辑之后新建，form表单resetFields失效

（1）如果新建的字段只有几个，编辑的时候row有很多字段，这时使用赋值的方法清空。

  this.formValidate={
    
    
           name:undefined,
           isAlone:undefined,
           expireDate:undefined,
           expireCount:undefined
       }
  this.$refs.formValidate.resetFields()//清除校验规则

或者

 this.formValidate={}
 this.$refs.formValidate.resetFields()

注意：如果使用resetFields方法清空，虽然可以清空，但是在先编辑再新建时，提交的字段会有很多，而且都是编辑的那一行的数据。

即使加上this.$nextTick(()=>{}）也会有同样的问题，所有直接使用赋值的方法清空。

（2）如果新建和编辑的字段有些是可以显示隐藏的

这里需要清空的话，使用v-show

因为：

v-if="false"会销毁dom,当再次v-if="true"时会绑定不上 校验规则 和 需要清空的字段（初始值）。

v-show 只是css样式的显示隐藏，都已经被绑定在dom上，不会被销毁。

但是：

v-show隐藏的字段，仍然会校验不通过，v-if可以校验通过

总结：

（1）有显示隐藏，并且显示隐藏的字段需要验证：使用v-if

（2）有显示隐藏，显示隐藏字段不需要验证：v-if/v-show都可

使用v-if配合手动赋值清空再配合 this.$refs.formValidate.resetFields()//清除校验规则就可以全部情况都正常显示。

扫描二维码关注公众号，回复： 14835536 查看本文章