form组件使用记录
2021-03-15 本文已影响0人
零丶八八
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
