优化表单布局

src/components/app-form-group/app-form-group.less

 .app-form-group {
+
     >.ivu-card-head {
         >p {
             >i {
@@ -7,9 +8,12 @@
             }
         }
     }
+
     >.ivu-card-extra {
+
         .item-extract-mode {
             display: flex;
+
             .item {
                 margin-left: 12px;
             }
@@ -26,7 +30,8 @@
 .app-group-flex {
     height: 100%;
     overflow: auto;
-    > .ivu-card-body {
+
+    >.ivu-card-body {
         height: calc(100% - 51px);
         overflow: auto;
     }

src/components/app-form-group/app-form-group.vue

 <template>
-    <div class="app-form-group">
-        <div v-if="uiStyle=='STYLE2'">
+    <div :class="classes">
+        <template v-if="uiStyle=='STYLE2'">
             <app-form-group2
                 :caption="caption"
                 :uiStyle="uiStyle"
@@ -10,8 +10,8 @@
                 :titleBarCloseMode="titleBarCloseMode">
                    <slot></slot>
                 </app-form-group2>
-        </div>
-        <div v-else>
+        </template>
+        <template v-else>
             <card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes">
                 <p class='' slot='title'>
                      <icon v-if="titleBarCloseMode !== 0" :type="collapseContant ? 'ios-arrow-dropright-circle' : 'ios-arrow-dropdown-circle'"
@@ -87,17 +87,22 @@
                         </template>
                     </a >
                 </template>
-                <div v-if="Object.is(layoutType, 'FLEX')">
+                <template v-if="Object.is(layoutType, 'FLEX')">
                     <slot></slot>
-                </div>
-                <div v-if="!Object.is(layoutType, 'FLEX')">
+                </template>
+                <template v-if="!Object.is(layoutType, 'FLEX')">
                     <row :gutter="10"><slot></slot></row>
-                </div>
+                </template>
             </card>
-            <row v-if="isShowCaption === false" :class="classes">
-               <slot></slot>
-            </row>
-        </div>
+            <template v-if="isShowCaption === false">
+                <template v-if="Object.is(layoutType, 'FLEX')">
+                    <slot></slot>
+                </template>
+                <template v-if="!Object.is(layoutType, 'FLEX')">
+                    <row :gutter="10"><slot></slot></row>
+                </template>
+            </template>
+        </template>
     </div>
 </template>
 

src/components/app-form-item/app-form-item.less

 .app-form-item {
-    // margin-bottom: 16px;
-    >.ivu-form-item-label {
-        text-decoration: none;
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    >.ivu-form-item-content {
-        min-height: 36px;
-    }
+  height: 100%;
+
+  >.ivu-form-item-label {
+      text-decoration: none;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+  }
+
+  >.ivu-form-item-content {
+      height: 100%;
+      min-height: 36px;
+      
+      >.editor {
+          height: 100%;
+      }
+  }
 }
-.app-form-item-label-top {
-    >.ivu-form-item-label {
-        float: none;
-        display: inline-block;
-        padding: 0 0 10px;
-    }
+
+.app-form-item.label-top, .app-form-item.label-bottom {
+
+  .app-form-item-label {
+      height: 16px;
+  }
+
+  .editor {
+      height: calc(100% - 16px);
+  }
 }
 
-.app-form-item-label-left{
-  .app-form-item-label{
-    float: left;
-    text-align: right;
-    padding-right: 12px;
+.app-form-item.label-left, .app-form-item.label-right {
+
+  .app-form-item-label, .editor {
+      height: 100%;
   }
 }
-.app-form-item-label-right{
-  .app-form-item-label{
-    float: right;
-    text-align: left;
-    padding-left: 12px;
+
+.app-form-item.label-left {
+
+  .app-form-item-label {
+      float: left;
   }
 }
-.app-form-item-label-top{
-  .app-form-item-label{
-    display: block;
-    padding-bottom: 10px;
+
+.app-form-item.label-right {
+
+  .app-form-item-label {
+      float: right;
   }
 }
-.app-form-item-label-bottom{
-  .app-form-item-label{
-    display: block;
-    padding-top: 10px;
+
+.app-form-item.label-none {
+
+  .app-form-item-label {
+      display: none !important;
+  }
+
+  .editor {
+      height: 100%;
   }
 }
\ No newline at end of file