diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index 23a6d24b..d9e6e612 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -56,6 +56,7 @@ }, computed: { autoLabelWidth() { + if (!this.potentialLabelWidthArr.length) return 0; const max = Math.max(...this.potentialLabelWidthArr); return max ? `${max}px` : ''; } diff --git a/packages/form/src/label-wrap.vue b/packages/form/src/label-wrap.vue index 9a844bc3..d263f7dd 100644 --- a/packages/form/src/label-wrap.vue +++ b/packages/form/src/label-wrap.vue @@ -15,7 +15,10 @@ export default { const autoLabelWidth = this.elForm.autoLabelWidth; const style = {}; if (autoLabelWidth && autoLabelWidth !== 'auto') { - style.width = autoLabelWidth; + const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth; + if (marginLeft) { + style.marginLeft = marginLeft + 'px'; + } } return (
{ slots } @@ -64,10 +67,9 @@ export default { this.updateLabelWidth('update'); }, - // Is this necessary? - // updated() { - // this.updateLabelWidth('update'); - // }, + updated() { + this.updateLabelWidth('update'); + }, beforeDestroy() { this.updateLabelWidth('remove'); diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss index 3164a4a2..802a1178 100644 --- a/packages/theme-chalk/src/form.scss +++ b/packages/theme-chalk/src/form.scss @@ -86,7 +86,6 @@ @include e(label-wrap) { float: left; - text-align: right; .el-form-item__label { display: inline-block; float: none;