remove labelWidth when labelPosition is 'top' (#2417)

examples/docs/en-US/form.md

@@ -51,18 +51,8 @@
           user: '',
           region: ''
         },
-        formStacked: {
-          name: '',
-          region: '',
-          type: '',
-          remark: ''
-        },
-        formAlignRight: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        formAlignLeft: {
+        labelPosition: 'right',
+        formLabelAlign: {
           name: '',
           region: '',
           type: ''
@@ -221,13 +211,6 @@
         margin-right: 10px;
       }
     }
-    .demo-form-stacked {
-      width: 270px;
-
-      .el-select .el-input {
-        width: 100%;
-      }
-    }
     .demo-ruleForm {
       width: 480px;
 
@@ -372,91 +355,32 @@ When the vertical space is limited and the form is relatively simple, you can pu
 
 Depending on your design, there are several different ways to align your label element.
 
-#### Top
-
 :::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
 
 ```html
-<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
+<el-radio-group v-model="labelPosition" size="small">
+  <el-radio-button label="left">Left</el-radio-button>
+  <el-radio-button label="right">Right</el-radio-button>
+  <el-radio-button label="top">Top</el-radio-button>
+</el-radio-group>
+<div style="margin: 20px;"></div>
+<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
   <el-form-item label="Name">
-    <el-input v-model="formStacked.name"></el-input>
+    <el-input v-model="formLabelAlign.name"></el-input>
   </el-form-item>
   <el-form-item label="Activity zone">
-    <el-input v-model="formStacked.region"></el-input>
-  </el-form-item>
-  <el-form-item label="Activity form">
-    <el-input v-model="formStacked.type"></el-input>
-  </el-form-item>
-</el-form>
-<script>
-  export default {
-    data() {
-      return {
-        formStacked: {
-          name: '',
-          region: '',
-          type: ''
-        }
-      };
-    }
-  }
-</script>
-```
-:::
-
-#### Right
-
-:::demo When `label-position` is omitted, labels will align to the right
-
-```html
-<el-form :model="formAlignRight" label-width="120px">
-  <el-form-item label="Activity name">
-    <el-input v-model="formAlignRight.name"></el-input>
-  </el-form-item>
-  <el-form-item label="Promote area">
-    <el-input v-model="formAlignRight.region"></el-input>
-  </el-form-item>
-  <el-form-item label="Form of activity">
-    <el-input v-model="formAlignRight.type"></el-input>
-  </el-form-item>
-</el-form>
-<script>
-  export default {
-    data() {
-      return {
-        formAlignRight: {
-          name: '',
-          region: '',
-          type: ''
-        }
-      };
-    }
-  }
-</script>
-```
-:::
-
-#### Left
-
-:::demo When `label-position` is set to `top`, labels will align to the left.
-
-```html
-<el-form :model="formAlignLeft" label-position="left" label-width="120px">
-  <el-form-item label="Activity name">
-    <el-input v-model="formAlignLeft.name"></el-input>
-  </el-form-item>
-  <el-form-item label="Promotion area">
-    <el-input v-model="formAlignLeft.region"></el-input>
+    <el-input v-model="formLabelAlign.region"></el-input>
   </el-form-item>
   <el-form-item label="Activity form">
-    <el-input v-model="formAlignLeft.type"></el-input>
+    <el-input v-model="formLabelAlign.type"></el-input>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        formAlignLeft: {
+        labelPosition: 'right',
+        formLabelAlign: {
           name: '',
           region: '',
           type: ''
@@ -466,7 +390,6 @@ Depending on your design, there are several different ways to align your label e
   }
 </script>
 ```
-
 :::
 
 ### Validation

examples/docs/zh-CN/form.md

@@ -51,18 +51,8 @@
           user: '',
           region: ''
         },
-        formStacked: {
-          name: '',
-          region: '',
-          type: '',
-          remark: ''
-        },
-        formAlignRight: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        formAlignLeft: {
+        labelPosition: 'right',
+        formLabelAlign: {
           name: '',
           region: '',
           type: ''
@@ -216,13 +206,6 @@
         margin-right: 10px;
       }
     }
-    .demo-form-stacked {
-      width: 270px;
-
-      .el-select .el-input {
-        width: 100%;
-      }
-    }
     .demo-ruleForm {
       width: 460px;
 
@@ -365,88 +348,31 @@
 
 根据具体目标和制约因素，选择最佳的标签对齐方式。
 
-顶部对齐
-
 ::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
 ```html
-<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
+<el-radio-group v-model="labelPosition" size="small">
+  <el-radio-button label="left">左对齐</el-radio-button>
+  <el-radio-button label="right">右对齐</el-radio-button>
+  <el-radio-button label="top">顶部对齐</el-radio-button>
+</el-radio-group>
+<div style="margin: 20px;"></div>
+<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
   <el-form-item label="名称">
-    <el-input v-model="formStacked.name"></el-input>
+    <el-input v-model="formLabelAlign.name"></el-input>
   </el-form-item>
   <el-form-item label="活动区域">
-    <el-input v-model="formStacked.region"></el-input>
-  </el-form-item>
-  <el-form-item label="活动展开形式">
-    <el-input v-model="formStacked.type"></el-input>
-  </el-form-item>
-</el-form>
-<script>
-  export default {
-    data() {
-      return {
-        formStacked: {
-          name: '',
-          region: '',
-          type: ''
-        }
-      };
-    }
-  }
-</script>
-```
-:::
-
-右对齐
-
-::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
-```html
-<el-form :model="formAlignRight" label-width="80px">
-  <el-form-item label="活动名称">
-    <el-input v-model="formAlignRight.name"></el-input>
-  </el-form-item>
-  <el-form-item label="推广地">
-    <el-input v-model="formAlignRight.region"></el-input>
-  </el-form-item>
-  <el-form-item label="活动形式">
-    <el-input v-model="formAlignRight.type"></el-input>
-  </el-form-item>
-</el-form>
-<script>
-  export default {
-    data() {
-      return {
-        formAlignRight: {
-          name: '',
-          region: '',
-          type: ''
-        }
-      };
-    }
-  }
-</script>
-```
-:::
-
-左对齐
-
-::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
-```html
-<el-form :model="formAlignLeft" label-position="left" label-width="80px">
-  <el-form-item label="活动名称">
-    <el-input v-model="formAlignLeft.name"></el-input>
-  </el-form-item>
-  <el-form-item label="推广地">
-    <el-input v-model="formAlignLeft.region"></el-input>
+    <el-input v-model="formLabelAlign.region"></el-input>
   </el-form-item>
   <el-form-item label="活动形式">
-    <el-input v-model="formAlignLeft.type"></el-input>
+    <el-input v-model="formLabelAlign.type"></el-input>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        formAlignLeft: {
+        labelPosition: 'right',
+        formLabelAlign: {
           name: '',
           region: '',
           type: ''

packages/form/src/form-item.vue

@@ -4,7 +4,7 @@
     'is-validating': validateState === 'validating',
     'is-required': isRequired || required
   }">
-    <label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
+    <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
       {{label + form.labelSuffix}}
     </label>
     <div class="el-form-item__content" v-bind:style="contentStyle">
@@ -76,6 +76,7 @@
     computed: {
       labelStyle() {
         var ret = {};
+        if (this.form.labelPosition === 'top') return ret;
         var labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.width = labelWidth;
@@ -84,6 +85,7 @@
       },
       contentStyle() {
         var ret = {};
+        if (this.form.labelPosition === 'top') return ret;
         var labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.marginLeft = labelWidth;