1、  表单渲染 和 数据渲染 顺序问题

        原因: 执行setFieldsValue方法时,表单尚未渲染完成,找不到v-decorator,所以报错了,在setFieldsValue方法中,每一个值都要匹配到一个v-decorator

        解决:把setFieldsValue方法放在$nextTick后执行,保证 执行顺序为  表单渲染完成 -> setFieldsValue方法 -> setFieldsValue方法找到v-decorator项赋值

2、setFieldsValue 方法多余变量赋值 匹配不到 v-decorator

        原因:表单渲染完,但是setFieldsValue依旧报错,因为form表单中v-decorator只有a和b 两个数据项,但是setFieldsValue方法赋值为a,b,c.....,这时候c是没绑定v-decorator,所以会报错

<template>
    <a-form :form="form">
                    <a-form-item label="名称" >
                        <a-input  v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称"  />
                    </a-form-item>
    </a-form>
</template>
<script>
    export default {
        data () {
            return {
                 form: this.$form.createForm(this),  // 表单项
                 item: {},  // 默认表单项

                 obj: {
                     id: 333,
                     name: 'name'
                 },   
            }
        },
        mounted () {
            this.form.setFieldsValue({
                ...this.obj
            })
        }
    }
</script>

       

解决:

        1、 (推荐)不用setFieldsValue方法,使用v-decorator的initialValue默认value,v-decorator="['name', {initialValue: item.name}]" , 通过修改item变量达到赋值的目的

<template>
    <a-form :form="form">
                    <a-form-item label="名称" >
                        <a-input  v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称"  />
                    </a-form-item>
    </a-form>
</template>
<script>
    export default {
        data () {
            return {
                 form: this.$form.createForm(this),  // 表单项
                 item: {},  // 默认表单项

                 obj: {
                     id: 333,
                     name: 'name'
                 },   
            }
        },
        mounted () {
            this.item = {
                ...this.obj
            }
        }
    }
</script>

       

2、使用setFieldsValue方法,但是只赋值当前form绑定v-decorator的值,不方便
 

<template>
    <a-form :form="form">
                    <a-form-item label="名称" >
                        <a-input  v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称"  />
                    </a-form-item>
    </a-form>
</template>
<script>
    export default {
        data () {
            return {
                 form: this.$form.createForm(this),  // 表单项
                 item: {},  // 默认表单项

                 obj: {
                     id: 333,
                     name: 'name'
                 },   
            }
        },
        mounted () {
            this.form.setFieldsValue({
                name: this.obj.name
            })
        }
    }
</script>

Logo

前往低代码交流专区

更多推荐