mirror of https://github.com/ElemeFE/element
remove labelWidth when labelPosition is 'top' (#2417)
baiyaaaaa
cinwell.li
parent
d65ecbc7f3
commit
f1b8909e27
|
|
@ -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,27 +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-input v-model="formLabelAlign.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formStacked.type"></el-input>
|
||||
<el-input v-model="formLabelAlign.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formStacked: {
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
|
|
@ -404,71 +392,6 @@ Depending on your design, there are several different ways to align your label e
|
|||
```
|
||||
:::
|
||||
|
||||
#### 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-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
<el-input v-model="formAlignLeft.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formAlignLeft: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Validation
|
||||
|
||||
Form component allows you to verify your data, helping you find and correct errors.
|
||||
|
|
|
|||
|
|
@ -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-input v-model="formLabelAlign.region"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input v-model="formAlignRight.type"></el-input>
|
||||
<el-input v-model="formLabelAlign.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-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input v-model="formAlignLeft.type"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formAlignLeft: {
|
||||
labelPosition: 'right',
|
||||
formLabelAlign: {
|
||||
name: '',
|
||||
region: '',
|
||||
type: ''
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue