Form: fix label style (#14969)

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` : '';
       }

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 (<div class="el-form-item__label-wrap" style={style}>
         { 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');

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;