From 28d3ea095903d647773effd419835686a75eb9a2 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 May 2022 20:14:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20label=20width=E4=B8=BA0=E6=97=B6?=
 =?UTF-8?q?=E9=9A=90=E8=97=8Flabel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Container.vue | 10 ++++--
 packages/form/src/theme/form.scss          | 41 +++++++++++++---------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index ca64535f..9b2a99f3 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -25,15 +25,16 @@
       :prop="itemProp"
       :step-active="stepActive"
       :expand-more="expand"
-      :label-width="config.labelWidth || labelWidth"
+      :label-width="itemLabelWidth"
       @change="onChangeHandler"
     ></component>
 
     <template v-else-if="type && display">
       <el-form-item
         :style="config.tip ? 'flex: 1' : ''"
+        :class="{ hidden: itemLabelWidth === 0 || !config.text }"
         :prop="itemProp"
-        :label-width="config.text ? config.labelWidth || labelWidth : '0'"
+        :label-width="itemLabelWidth"
         :rules="rule"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
@@ -88,7 +89,7 @@
           :size="size"
           :step-active="stepActive"
           :expand-more="expand"
-          :label-width="config.labelWidth || labelWidth"
+          :label-width="itemLabelWidth"
           :prop="itemProp"
           @change="onChangeHandler"
         ></m-form-container>
@@ -188,6 +189,8 @@ export default defineComponent({
       return displayFunction(mForm, props.config.display, props);
     });
 
+    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
+
     watchEffect(() => {
       expand.value = props.expandMore;
     });
@@ -263,6 +266,7 @@ export default defineComponent({
       itemProp,
       items,
       display,
+      itemLabelWidth,
       tagName,
       rule,
       tooltip,
diff --git a/packages/form/src/theme/form.scss b/packages/form/src/theme/form.scss
index bded649c..fb6054cf 100644
--- a/packages/form/src/theme/form.scss
+++ b/packages/form/src/theme/form.scss
@@ -2,29 +2,36 @@
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-.m-form,
-.m-form-panel.el-card .el-card__body {
-  color: #333;
-  background-color: #fff;
-}
+.m-form {
+  .m-form-tip {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
 
-.m-form .m-form-tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
+  .m-form-schematic {
+    max-width: 50%;
+    height: 100%;
+  }
 
-.m-form .m-form-schematic {
-  max-width: 50%;
-  height: 100%;
-}
+  .el-table {
+    .cell > div.m-form-container {
+      display: block;
+    }
+  }
 
-.el-table {
-  .cell > div.m-form-container {
-    display: block;
+  .el-tabs {
+    margin-bottom: 10px;
+  }
+
+  .el-form-item.hidden {
+    .el-form-item__label {
+      display: none;
+    }
   }
 }