Ant Design框架 form表单 数据绑定，赋值 / 获取 数据

前言：AntD框架官网表单不是用：v-model进行数据绑定，而是用：v-decorator="['name']"

【赋值】创建好所需要的form表单，绑定好key值：例：（v-decorator="['name']"）

// 需要的form表单
<a-form :form="form">
    <a-form-item label="名称:">
	    <a-input placeholder="请输入名称" v-decorator="['name']"></a-input>
    </a-form-item>
	<a-form-item label="文本:">
	    <a-input placeholder="请输入名称" v-decorator="['text']"></a-input>
	</a-form-item>
</a-form>

【赋值】在data里面定义form，注：（必须）

// data里面要定义 form（必须）
data() {
    return {
        form: this.$form.createForm(this),
    }
}

【赋值】在methods方法里写

方式一：对象赋值（普遍用于少量数据赋值）

// 自定义数据
let data = {
    a：'数据1', 
    b：'数据2'
}
// 通过this.form.setFieldsValu进行表单赋值
// 数据绑定 跟v-model效果一样
this.form.setFieldsValue({
   text: data.a,
   name: data.b,
})
// text: '数据1', name: '数据2'
// text name 是上面在表单中绑定好的key名
v-decorator="['text']"
v-decorator="['name']"

方式二：需要导入 lodash 的 pick 函数：import pick from 'lodash.pick'

data数据定义字段名，跟表单字段名一致

赋值方式跟ES6解构赋值相似

//导入 pick     import pick from 'lodash.pick'

let data = { name: '数据1', text: '数据2', age: '数据3' }
    this.$nextTick(() => {
        this.form.setFieldsValue(pick(data, 'name', 'text', 'age'))
    })
// name: '数据1'
// text: '数据2'
// age:  '数据3'
// 表单框内会出现对应赋值的数据

【获取】获取整个form表单的当前值，可以是输入的，也可以是赋值的

// 获取表单所有数据 value
this.form.validateFields((err, value) => {
    if (!err) { // 这个err是判断表单必填项的，如果不加，必填项失效
        console.log(value);
    }
})
// 获取全部表单内存在的数据（输入的||赋值的）
// text: '数据1'
// name: '数据2'

【获取】获取form表单 单个数据的值

let a = this.form.getFieldValue('text')
console.log(a);
// '数据1'
let b = this.form.getFieldValue('name')
console.log(b);
// '数据2'