Form: direct child items should inherit label-width

examples/docs/en-US/form.md

@@ -283,7 +283,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
   <el-form-item label="Activity form">
     <el-input type="textarea" v-model="form.desc"></el-input>
   </el-form-item>
-  <el-form-item label-width="120px">
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">Create</el-button>
     <el-button>Cancel</el-button>
   </el-form-item>
@@ -445,7 +445,7 @@ Form component allows you to verify your data, helping you find and correct erro
   <el-form-item label="Activity form" prop="desc">
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
-  <el-form-item label-width="120px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
     <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
@@ -525,7 +525,7 @@ Form component allows you to verify your data, helping you find and correct erro
   <el-form-item label="Age" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
-  <el-form-item label-width="120px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
     <el-button @click="resetForm('ruleForm2')">Reset</el-button>
   </el-form-item>
@@ -634,7 +634,7 @@ Form component allows you to verify your data, helping you find and correct erro
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
-  <el-form-item label-width="120px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
     <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
@@ -700,7 +700,7 @@ Form component allows you to verify your data, helping you find and correct erro
   >
     <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item label-width="100px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
     <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
   </el-form-item>
@@ -735,7 +735,7 @@ Form component allows you to verify your data, helping you find and correct erro
 :::
 
 :::tip
-If an `el-form-item` has an empty `label`, and you wish to align it with other items, please add `label-width` on that `el-form-item`.
+When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
 :::
 
 ### Form Attributes
@@ -746,7 +746,7 @@ If an `el-form-item` has an empty `label`, and you wish to align it with other i
 | rules | validation rules of form | object | — | — |
 | inline | whether the form is inline | boolean | — | false |
 | label-position | position of label | string | left/right/top | right |
-| label-width | width of label, and all form items will inherit from `Form` | string | — | — |
+| label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
 

examples/docs/zh-CN/form.md

@@ -277,7 +277,7 @@
   <el-form-item label="活动形式">
     <el-input type="textarea" v-model="form.desc"></el-input>
   </el-form-item>
-  <el-form-item label-width="80px">
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">立即创建</el-button>
     <el-button>取消</el-button>
   </el-form-item>
@@ -436,7 +436,7 @@
   <el-form-item label="活动形式" prop="desc">
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
-  <el-form-item label-width="100px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
     <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
@@ -515,7 +515,7 @@
   <el-form-item label="年龄" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
-  <el-form-item label-width="100px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
     <el-button @click="resetForm('ruleForm2')">重置</el-button>
   </el-form-item>
@@ -623,7 +623,7 @@
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
-  <el-form-item label-width="100px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
     <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
@@ -688,7 +688,7 @@
   >
     <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item label-width="100px">
+  <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
     <el-button @click="resetForm('numberValidateForm')">重置</el-button>
   </el-form-item>
@@ -723,7 +723,7 @@
 :::
 
 :::tip
-当 `el-form-item` 的 `label` 属性为空时，如果希望和其他 `label` 属性不为空的表单项内容对齐，请在 `el-form-item` 上设置 `label-width` 属性。
+嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。
 :::
 
 ### Form Attributes
@@ -734,7 +734,7 @@
 | rules    | 表单验证规则 | object | — | — |
 | inline    | 行内表单模式 | boolean | — | false |
 | label-position | 表单域标签的位置 | string |  right/left/top            | right |
-| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
+| label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 

packages/form/src/form-item.vue

@@ -87,7 +87,7 @@
         var ret = {};
         const label = this.label;
         if (this.form.labelPosition === 'top' || this.form.inline) return ret;
-        if (!label && !this.labelWidth) return ret;
+        if (!label && !this.labelWidth && this.isNested) return ret;
         var labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.marginLeft = labelWidth;
@@ -95,9 +95,14 @@
         return ret;
       },
       form() {
-        var parent = this.$parent;
-        while (parent.$options.componentName !== 'ElForm') {
+        let parent = this.$parent;
+        let parentName = parent.$options.componentName;
+        while (parentName !== 'ElForm') {
+          if (parentName === 'ElFormItem') {
+            this.isNested = true;
+          }
           parent = parent.$parent;
+          parentName = parent.$options.componentName;
         }
         return parent;
       },
@@ -136,7 +141,8 @@
         validateState: '',
         validateMessage: '',
         validateDisabled: false,
-        validator: {}
+        validator: {},
+        isNested: false
       };
     },
     methods: {