form组件的基本构成:
<a-form>
<a-form-item>
<components v-decorator="[id, options]" ><!-- 这里是form收集数据所用的组件,通常为antdv提供的Data Entry类组件 -->
</a-form-item>
</a-form>
-
form标签属性
- form:通过该属性调用一些form提供的api,通过this.$form.createForm(this)设置。
- layout:表单布局,horizontal、vertical、inline
- labelCol & wrapperCol:label标签 和 输入控件 的布局,设置同Col组件。
-
form-item标签属性
- label:标签文本
-
录入组件属性
- v-decorator:经过 v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
- 你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
- 你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
- 你不应该用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。
- v-decorator:经过 v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
form常用api:
- getFieldsValue,获取一组输入控件的值。
- getFieldValue: 获取一个输入控件的值。
- setFieldsValue: 设置一组输入控件的值。
- validateFields: 校验并获取输入域的值与error