首页 技术 正文
技术 2022年11月9日
0 收藏 671 点赞 2,412 浏览 862 个字

在用ant-design-vue的框架中,使用到了这种场景,就是点击编辑按钮,弹出modal模态框,渲染modal模态框中的form表单页面,并给表单赋值,但是在给表单赋值的时候,总是会报错。

错误提示: Warning: You cannot set a form field before rendering a field associated with the value.

经过一番查找后发现,造成这种原因一般有以下几个原因:

1.使用了表单的方法setFieldsValue(),来设置一组输入控件的值,传入的值为object,但是传入的值要和表单的值一一对应,能少传不能多传。

遇到这种情况的解决方式为:form渲染需要什么值你就传什么值

方式1:一个一个传

 this.form.setFieldsValue({ note: '123', mark: '456' })

方式2:

add (record) {  //record:需要引用的值
this.visible = true
this.mdl = Object.assign({}, record) // 浅拷贝
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
}

但是你会发现这么些还是报同样的错误。按照错误提示的原意:不能在表单渲染之前赋值

2.调用setFieldsValue()方法,需要放在$nextTick()函数中执行,改为如下即可:

this.$nextTick(()=>{
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
})

一般到这里就能解决问题了,如果还在报同样的错误,那就这样吧:

3.再放到setTimeout()方法中

this.$nextTick(() => {
setTimeout(() => {
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
})
})
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,083
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,558
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,407
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,180
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,817
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,900