diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md
index 2035fbc88..8cdf621b0 100644
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -283,7 +283,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
-
+
Create
Cancel
@@ -445,7 +445,7 @@ Form component allows you to verify your data, helping you find and correct erro
-
+
Create
Reset
@@ -525,7 +525,7 @@ Form component allows you to verify your data, helping you find and correct erro
-
+
Submit
Reset
@@ -634,7 +634,7 @@ Form component allows you to verify your data, helping you find and correct erro
>
Delete
-
+
Submit
New domain
Reset
@@ -700,7 +700,7 @@ Form component allows you to verify your data, helping you find and correct erro
>
-
+
Submit
Reset
@@ -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 |
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index 82d2a4c01..56970a540 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -277,7 +277,7 @@
-
+
立即创建
取消
@@ -436,7 +436,7 @@
-
+
立即创建
重置
@@ -515,7 +515,7 @@
-
+
提交
重置
@@ -623,7 +623,7 @@
>
删除
-
+
提交
新增域名
重置
@@ -688,7 +688,7 @@
>
-
+
提交
重置
@@ -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 |
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index 6c7f201bf..5923765dc 100644
--- a/packages/form/src/form-item.vue
+++ b/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: {