From 组件新增 labelCol、wrapperCol

Author: PanStar

components/form/Form.jsx

@@ -1,5 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
+import { ColProps } from '../grid/Col';
 import Vue from 'vue';
 import isRegExp from 'lodash/isRegExp';
 import warning from '../_util/warning';
@@ -59,6 +60,8 @@ export const WrappedFormUtils = {
 
 export const FormProps = {
   layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+  labelCol: PropTypes.shape(ColProps).loose,
+  wrapperCol: PropTypes.shape(ColProps).loose,
   form: PropTypes.object,
   // onSubmit: React.FormEventHandler<any>;
   prefixCls: PropTypes.string,

components/form/FormItem.jsx

@@ -314,7 +314,8 @@ export default {
     },
 
     renderWrapper(prefixCls, children) {
-      const { wrapperCol = {} } = this;
+      const { FormProps: { wrapperCol: wrapperColForm = {} } = {} } = this;
+      const { wrapperCol = wrapperColForm } = this;
       const { class: cls, style, id, on, ...restProps } = wrapperCol;
       const className = classNames(`${prefixCls}-item-control-wrapper`, cls);
       const colProps = {
@@ -369,7 +370,8 @@ export default {
     },
 
     renderLabel(prefixCls) {
-      const { labelCol = {}, colon, id } = this;
+      const { FormProps: { labelCol: labelColForm = {} } = {} } = this;
+      const { labelCol = labelColForm, colon, id } = this;
       const label = getComponentFromProp(this, 'label');
       const required = this.isRequired();
       const {

components/form/demo/validate-other.vue

@@ -9,13 +9,13 @@ Demonstration of validation configuration for form controls which are not shown
 </us>
 
 <template>
-  <a-form id="components-form-demo-validate-other" :form="form" @submit="handleSubmit">
-    <a-form-item v-bind="formItemLayout" label="Plain Text">
+  <a-form id="components-form-demo-validate-other" :form="form" v-bind="formItemLayout" @submit="handleSubmit">
+    <a-form-item label="Plain Text">
       <span class="ant-form-text">
         China
       </span>
     </a-form-item>
-    <a-form-item v-bind="formItemLayout" label="Select" has-feedback>
+    <a-form-item label="Select" has-feedback>
       <a-select
         v-decorator="[
           'select',
@@ -32,7 +32,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-select>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Select[multiple]">
+    <a-form-item label="Select[multiple]">
       <a-select
         v-decorator="[
           'select-multiple',
@@ -57,25 +57,25 @@ Demonstration of validation configuration for form controls which are not shown
       </a-select>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="InputNumber">
+    <a-form-item label="InputNumber">
       <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
       <span class="ant-form-text">
         machines
       </span>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Switch">
+    <a-form-item label="Switch">
       <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Slider">
+    <a-form-item label="Slider">
       <a-slider
         v-decorator="['slider']"
         :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
       />
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Radio.Group">
+    <a-form-item label="Radio.Group">
       <a-radio-group v-decorator="['radio-group']">
         <a-radio value="a">
           item 1
@@ -89,7 +89,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-radio-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Radio.Button">
+    <a-form-item label="Radio.Button">
       <a-radio-group v-decorator="['radio-button']">
         <a-radio-button value="a">
           item 1
@@ -103,7 +103,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-radio-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Checkbox.Group">
+    <a-form-item label="Checkbox.Group">
       <a-checkbox-group
         v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
         style="width: 100%;"
@@ -138,15 +138,11 @@ Demonstration of validation configuration for form controls which are not shown
       </a-checkbox-group>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Rate">
+    <a-form-item label="Rate">
       <a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
     </a-form-item>
 
-    <a-form-item
-      v-bind="formItemLayout"
-      label="Upload"
-      extra="longgggggggggggggggggggggggggggggggggg"
-    >
+    <a-form-item label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
       <a-upload
         v-decorator="[
           'upload',
@@ -163,7 +159,7 @@ Demonstration of validation configuration for form controls which are not shown
       </a-upload>
     </a-form-item>
 
-    <a-form-item v-bind="formItemLayout" label="Dragger">
+    <a-form-item label="Dragger">
       <div class="dropbox">
         <a-upload-dragger
           v-decorator="[

components/form/index.en-US.md

@@ -7,6 +7,8 @@
 | form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form. If you use the template syntax, you can use `this.$form.createForm(this, options)` | object | n/a |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
 | layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) |  |
+| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) |  |
 | autoFormCreate(deprecated) | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()`. You should use `$form.createForm` to instead it after 1.1.9. | Function(form) |  |
 | options(deprecated) | The `options` corresponding to `Form.create(options)`. You should use `$form.createForm` to instead it after 1.1.9. | Object | {} |
 

components/form/index.zh-CN.md

@@ -7,6 +7,8 @@
 | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用 template 语法，可以使用 this.\$form.createForm(this, options) | object | 无 |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) |  |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) |  |
 | selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需 1.3.17 版本以上 | boolean | false |
 
 ### 事件