test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-03 12:48:45 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Form: direct child items should inherit label-width

Browse Source
This commit is contained in:
Leopoldthecoder 2017-07-25 12:07:41 +08:00 committed by 杨奕
parent 1d7527df94
commit c1b062b60d
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/en-US/form.md
View File

@ -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 |

14
examples/docs/zh-CN/form.md
View File

@ -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 |

14
packages/form/src/form-item.vue
View File

@ -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: {