AntDesignVue给a-form表单赋值及获取表单数据
这⾥先说⼀下v-decorator指令：
v-decorator
下⾯是form表单内的⽂本输⼊框，使⽤了v-decorate进⾏数据绑定：
<a-input placeholder="请输⼊名称" v-decorator="['name', { rules: [{ required: true, message: '请输⼊名称!' }] }]"></a-input>
这个是v-decorate的⽤法，类似于v-model，但是v-decorator可以更⽅便的添加校验，必填项等；v-model可以更⽅便地获取值以及设置值，这个是⼆者在开发时最明显的区别（其他的我暂时没发现）。
这⾥是主要讲v-decorator，因为表单内使⽤这个指令。
form
使⽤表单有最重要的⼀点：就是表单a-form需要使⽤this.form属性，就必须进⾏包装，如下图：
这个是官⽹API给的⽤法。
所以，在使⽤时要添加：
<a-form layout="inline" :form="form">
<a-form-item label="名称:">
<a-input placeholder="请输⼊名称" v-decorator="['name', { rules: [{ required: true, message: '请输⼊名称!' }] }]"></a-input>
</a-form-item>
</a-form>
这⾥使⽤的template语法，form必须在data内定义：
form: this.$ateForm(this),
这是表单的设置。
form设置值
input标签placeholder属性当对form值进⾏定义后，后⾯就可以使⽤this.form来获取表单内的东西了。
习惯在表单设置值前添加：setFields();
设置值的⽅式是：this.form.setFieldsValue();
⽅式⼀：
然后进⾏设置值：
this.form.setFieldsValue({
name: this.data.name,
age: this.data.age
})
这⾥的name就是上述a-input标签内的name属性。这种⽅法适合参数少的情况。
⽅式⼆（个⼈更喜欢这种，因为参数真的不少T_T）：
需要先在data内定义  model: {} 对象，后⾯使⽤model设置，⽽且需要导⼊lodash的pick函数：
setFields();
this.$nextTick(() => {
this.form.setFieldsValue(del, ',name', 'age'))
});
这⾥的 等于是深拷贝赋值对象，record是我拿到的需要设置进⽂本框的值，这⾥的pick参考。
重点是这⼏个，可以看这篇。
这个⽅式等于是将值统⼀放在 model这个对象内，然后将你需要设置进去的值，通过pick从del内选择得到，最后通过this.form.setFieldsValue(); 设置进去即可。
刚才说了设置值，接下来就是获取值。
form获取值
这个相对简单⼀些：
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
// do something
}
})
这⾥的values就是你需要拿到的表单内的所有值，打印可以看到的，拿到之后就可以进⾏其他操作啦
具体能写这么多啦，欢迎补充指教！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。