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: '',
|
user: '',
|
||||||
region: ''
|
region: ''
|
||||||
},
|
},
|
||||||
formStacked: {
|
labelPosition: 'right',
|
||||||
name: '',
|
formLabelAlign: {
|
||||||
region: '',
|
|
||||||
type: '',
|
|
||||||
remark: ''
|
|
||||||
},
|
|
||||||
formAlignRight: {
|
|
||||||
name: '',
|
|
||||||
region: '',
|
|
||||||
type: ''
|
|
||||||
},
|
|
||||||
formAlignLeft: {
|
|
||||||
name: '',
|
name: '',
|
||||||
region: '',
|
region: '',
|
||||||
type: ''
|
type: ''
|
||||||
|
|
@ -221,13 +211,6 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.demo-form-stacked {
|
|
||||||
width: 270px;
|
|
||||||
|
|
||||||
.el-select .el-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.demo-ruleForm {
|
.demo-ruleForm {
|
||||||
width: 480px;
|
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.
|
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.
|
:::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
|
```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-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>
|
||||||
<el-form-item label="Activity zone">
|
<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>
|
||||||
<el-form-item label="Activity form">
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formStacked: {
|
labelPosition: 'right',
|
||||||
|
formLabelAlign: {
|
||||||
name: '',
|
name: '',
|
||||||
region: '',
|
region: '',
|
||||||
type: ''
|
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
|
### Validation
|
||||||
|
|
||||||
Form component allows you to verify your data, helping you find and correct errors.
|
Form component allows you to verify your data, helping you find and correct errors.
|
||||||
|
|
|
||||||
|
|
@ -51,18 +51,8 @@
|
||||||
user: '',
|
user: '',
|
||||||
region: ''
|
region: ''
|
||||||
},
|
},
|
||||||
formStacked: {
|
labelPosition: 'right',
|
||||||
name: '',
|
formLabelAlign: {
|
||||||
region: '',
|
|
||||||
type: '',
|
|
||||||
remark: ''
|
|
||||||
},
|
|
||||||
formAlignRight: {
|
|
||||||
name: '',
|
|
||||||
region: '',
|
|
||||||
type: ''
|
|
||||||
},
|
|
||||||
formAlignLeft: {
|
|
||||||
name: '',
|
name: '',
|
||||||
region: '',
|
region: '',
|
||||||
type: ''
|
type: ''
|
||||||
|
|
@ -216,13 +206,6 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.demo-form-stacked {
|
|
||||||
width: 270px;
|
|
||||||
|
|
||||||
.el-select .el-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.demo-ruleForm {
|
.demo-ruleForm {
|
||||||
width: 460px;
|
width: 460px;
|
||||||
|
|
||||||
|
|
@ -365,88 +348,31 @@
|
||||||
|
|
||||||
根据具体目标和制约因素，选择最佳的标签对齐方式。
|
根据具体目标和制约因素，选择最佳的标签对齐方式。
|
||||||
|
|
||||||
顶部对齐
|
|
||||||
|
|
||||||
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
|
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
|
||||||
```html
|
```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-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>
|
||||||
<el-form-item label="活动区域">
|
<el-form-item label="活动区域">
|
||||||
<el-input v-model="formStacked.region"></el-input>
|
<el-input v-model="formLabelAlign.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>
|
||||||
<el-form-item label="活动形式">
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formAlignRight: {
|
labelPosition: 'right',
|
||||||
name: '',
|
formLabelAlign: {
|
||||||
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: {
|
|
||||||
name: '',
|
name: '',
|
||||||
region: '',
|
region: '',
|
||||||
type: ''
|
type: ''
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
'is-validating': validateState === 'validating',
|
'is-validating': validateState === 'validating',
|
||||||
'is-required': isRequired || required
|
'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 + form.labelSuffix}}
|
||||||
</label>
|
</label>
|
||||||
<div class="el-form-item__content" v-bind:style="contentStyle">
|
<div class="el-form-item__content" v-bind:style="contentStyle">
|
||||||
|
|
@ -76,6 +76,7 @@
|
||||||
computed: {
|
computed: {
|
||||||
labelStyle() {
|
labelStyle() {
|
||||||
var ret = {};
|
var ret = {};
|
||||||
|
if (this.form.labelPosition === 'top') return ret;
|
||||||
var labelWidth = this.labelWidth || this.form.labelWidth;
|
var labelWidth = this.labelWidth || this.form.labelWidth;
|
||||||
if (labelWidth) {
|
if (labelWidth) {
|
||||||
ret.width = labelWidth;
|
ret.width = labelWidth;
|
||||||
|
|
@ -84,6 +85,7 @@
|
||||||
},
|
},
|
||||||
contentStyle() {
|
contentStyle() {
|
||||||
var ret = {};
|
var ret = {};
|
||||||
|
if (this.form.labelPosition === 'top') return ret;
|
||||||
var labelWidth = this.labelWidth || this.form.labelWidth;
|
var labelWidth = this.labelWidth || this.form.labelWidth;
|
||||||
if (labelWidth) {
|
if (labelWidth) {
|
||||||
ret.marginLeft = labelWidth;
|
ret.marginLeft = labelWidth;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue