vue antd 表单 You can use `getFieldDecorator(id, options)` instead `v-decorator=“[id, options]“`

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>