• 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 来设置需要渲染表单的值

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

    之后又出现了新的问题, 因为页面上的异常处理是异步判断的, 使用了 serializeType 来判断是否显示, 这时候直接设置 exceptionHandler 也是会报同样的错误

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N5CoScOb-1655445222472)(https://juejin.cn/ “点击并拖拽以移动”)]​解决思路: 用 promise 先设置可以直接渲染的值 其他异步判断的值二次渲染

    优化后:

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

    问题解决

    1. 自定义 v-decorator 组件的坑

    控制台报: Warning: MachineMultiSelector default value can not collect, please use option.initialValue to set default value.

    自定义 v-decorator 的组件需要两个基本设置, 父传子的 value 属性, 和 value 发生变化子传父的change 事件

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

    这个问题产生的原因是 不可以给 props 的 value 设置默认值, 可以用 decorator.option.initialValue 属性设置默认值

    修改后:

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

    问题解决

  • 相关阅读:
    教你VSCode如何快速对齐代码、格式化代码
    【VMware ESXi】HP Z4G4 Workstation安装ESXi停留在Shutting down firmware services...的解决办法。
    OV5640的参数与配置方法
    如何在Unity中实现高性能的实时阴影渲染?
    Python21天学习挑战赛Day1·正则表达式(应用)
    如何在分面中添加数学表达式标签?
    【SpringBoot的自动配置--下篇】架构师如何自定义自己的条件注解与自动配置
    2024一定要看的文章系列!!!接口自动化测试框架思路和实战(5):【推荐】混合测试自动化框架(关键字+数据驱动)
    Nacos的作用及用法
    手把手教你创建自己的 GPTs,打造专属的 AI 聊天机器人
  • 原文地址:https://blog.csdn.net/web2022050903/article/details/125332241