Ant Design Vue Form表单验证后无法绑定数据的解决办法

Ant Design Vue Form表单验证后无法绑定数据的解决办法

官方网站ant design的表单验证链接：https://vue.ant.design/components/form/

https://ant.design/components/form-cn/

验证方式很是不爽，显得复杂臃肿

可以换一种方式，由于rules验证其实是一个数组，那么我直接在data中定义，如下，页面这样

data中定义rule数组

注意验证number需要将其转换一下

但是虽然验证可以实现，提示报错

Warning: `getFieldDecorator` will override `value`, so please don't set `value and v-model` directly and use `setFieldsValue` to set it.

百度一查便知，使用ant design结合vue做表单验证后会将value值覆盖掉，也就是说使用value或者v-model绑定数据将会失效，但是可以取值，做修改的时候，返回数据无法绑定，按照官网的解决办法是使用setFieldsValue方法动态赋值，但是依然不舒服。

后来想了个办法，rule有默认值initialValue，只要在修改时返回的数据赋值给对应字段的rule默认值即可，直接赋值会报未定义或者null的错，我们需要在返回数据的时候重新绑定

我们可以在返回数据的时候进行遍历赋值

注意rule中的数组名如leaveName需要跟返回的数据名一致，这样先遍历rule减少压力，挨个赋值即可，每次取回数据重新调用下即可。