Vue + Ant Design form表单的一些坑

最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的

1. 设置默认值的坑

控制台报 Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSxUJCu6-1655445222471)(https://juejin.cn/ “点击并拖拽以移动”)]​

问题原因: 产生此问题的原因是 调用 setFieldsValue 方法时 入参对象设置了一些不该存 在 或页面异步判断的一些值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbZ1cFOv-1655445222471)(https://juejin.cn/ “点击并拖拽以移动”)]​

此时的 row 是直接调用接口拿到的数据 有一些其他不需要设置的值 如创建时间, 这时候就会报错

解决思路: 使用 lodash.pick 方法和 object.assign 来设置需要渲染表单的值

优化后: