antd vue 中 关于骨架屏 skeleton 中嵌套form 出现表单内容无法渲染问题

antd vue 中 关于骨架屏 skeleton 中嵌套form 出现表单内容无法渲染问题

问题描述

根据官方文档,在使用骨架得时候,内部嵌套得表单,其实目的是为了实现,预加载得时候,loading得效果,数据加载完成之后,在显示,
在这里插入图片描述
在这里插入图片描述

但是如此写法,数据无法渲染,甚至还有些调皮得警告
Warning: You cannot set a form field before rendering a field associated with the value.
在这里插入图片描述

问题分析

出现以上问题有两点,

  1. 可能你的setFieldsValue里面得值,和表单项得v-decorator没有一一对应
  2. 表单还没加载完成就set值了

后来核对了下字段发现可能是2

问题解决

这个问题在于骨架屏标签a-skeleton,推测可能其内部是通过v-if得方式显示,所以在loading得时候,form是没有得,所以值set就无法set进去,进行如下修改
别包起来,自己显示自己得就好!
在这里插入图片描述
使用v-show,可以在页面渲染得时候就加载出form,这样就不会出现异常了,很稳

以上

你可能感兴趣的:(vue,ant,vue)