优化表单布局

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">
+            <template v-if="isShowCaption === false">
+                <template v-if="Object.is(layoutType, 'FLEX')">
                     <slot></slot>
-            </row>
-        </div>
+                </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;
+  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-right {
+
+  .app-form-item-label, .editor {
+      height: 100%;
   }
 }
 
-.app-form-item-label-left{
-  .app-form-item-label{
+.app-form-item.label-left {
+
+  .app-form-item-label {
       float: left;
-    text-align: right;
-    padding-right: 12px;
   }
 }
-.app-form-item-label-right{
-  .app-form-item-label{
+
+.app-form-item.label-right {
+
+  .app-form-item-label {
       float: right;
-    text-align: left;
-    padding-left: 12px;
   }
 }
-.app-form-item-label-top{
-  .app-form-item-label{
-    display: block;
-    padding-bottom: 10px;
+
+.app-form-item.label-none {
+
+  .app-form-item-label {
+      display: none !important;
   }
-}
-.app-form-item-label-bottom{
-  .app-form-item-label{
-    display: block;
-    padding-top: 10px;
+
+  .editor {
+      height: 100%;
   }
 }
\ No newline at end of file

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

 <template>
-    <div>
-        <div v-if="this.uiStyle === 'STYLE2'">
+    <div class="app-form-item-wrapper">
+        <template v-if="this.uiStyle === 'STYLE2'">
             <app-form-item2
                 :caption="caption"
                 :labelStyle="labelStyle"
@@ -14,33 +14,38 @@
                 :itemRules="itemRules">
                 <slot></slot>
             </app-form-item2>
-        </div>
-        <div v-if="this.uiStyle !== 'STYLE2'">
-            <form-item
-                :prop="name"
-                :error="error"
-                :required="required"
-                :rules="rules"
-                :class="classes">
-                  <div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="slot-editor" :style="slotstyle">
+        </template>
+        <template v-if="this.uiStyle !== 'STYLE2'">
+            <form-item :prop="name" :error="error" :required="required" :rules="rules" :class="classes">
+                <div
+                    v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
+                    class="editor"
+                    :style="slotstyle"
+                >
                     <slot></slot>
                 </div>
-                  <span v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" :style="labelstyle"  :class="labelclasses">
-                      {{this.isEmptyCaption ? '' : this.caption}}
-                  </span>
-                  <div v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="slot-editor" :style="slotstyle">
+                <span
+                    v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0"
+                    :style="labelstyle"
+                    :class="labelclasses"
+                >
+                    {{this.isEmptyCaption ? '' : this.caption}}</span>
+                <div
+                    v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
+                    class="editor"
+                    :style="slotstyle"
+                >
                     <slot></slot>
                 </div>
             </form-item>
-        </div>
+        </template>
     </div>
 </template>
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 
 @Component({})
 export default class AppFormItem extends Vue {
-
   /**
    * 名称
    *
@@ -71,7 +76,13 @@ export default class AppFormItem extends Vue {
    * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
    * @memberof AppFormItem
    */
-    @Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
+  @Prop() public labelPos?:
+    | string
+    | "BOTTOM"
+    | "LEFT"
+    | "NONE"
+    | "RIGHT"
+    | "TOP";
 
   /**
    * 标签宽度
@@ -144,7 +155,7 @@ export default class AppFormItem extends Vue {
    * @param {*} oldVal
    * @memberof AppFormItem
    */
-    @Watch('itemRules',{deep:true})
+  @Watch("itemRules", { deep: true })
   onItemRulesChange(newVal: any, oldVal: any) {
     if (newVal) {
       try {
@@ -152,14 +163,13 @@ export default class AppFormItem extends Vue {
         const _rules: any[] = newVal;
         this.rules = [..._rules];
         this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
+          if (rule.hasOwnProperty("required")) {
             this.required = rule.required;
             return true;
           }
           return false;
         });
-            } catch (error) {
-            }
+      } catch (error) {}
     }
   }
 
@@ -171,28 +181,25 @@ export default class AppFormItem extends Vue {
    * @memberof AppFormItem
    */
   get classes(): string[] {
-        let posClass = '';
+    let posClass = "";
     switch (this.labelPos) {
-          case 'TOP':
-            posClass = 'app-form-item-label-top';
+      case "TOP":
+        posClass = "label-top";
         break;
-          case 'LEFT':
-            posClass = 'app-form-item-label-left';
+      case "LEFT":
+        posClass = "label-left";
         break;
-          case 'BOTTOM':
-            posClass = 'app-form-item-label-bottom';
+      case "BOTTOM":
+        posClass = "label-bottom";
         break;
-          case 'RIGHT':
-            posClass = 'app-form-item-label-right';
+      case "RIGHT":
+        posClass = "label-right";
         break;
-          case 'NONE':
-            posClass = 'app-form-item-label-none';
+      case "NONE":
+        posClass = "label-none";
         break;
     }
-        return [
-            'app-form-item',
-            posClass
-        ];
+    return [ "app-form-item", posClass ];
   }
 
   /**
@@ -202,8 +209,10 @@ export default class AppFormItem extends Vue {
    * @type {string}
    * @memberof AppFormItem
    */
-    get labelclasses():string{
-        return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label';
+  get labelclasses(): string {
+    return this.labelStyle
+      ? this.labelStyle + " app-form-item-label"
+      : "app-form-item-label";
   }
 
   /**
@@ -213,8 +222,10 @@ export default class AppFormItem extends Vue {
    * @type {string}
    * @memberof AppFormItem
    */
-    get labelstyle():any{
-        return {width:this.labelWidth+'px'};
+  get labelstyle(): any {
+    if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
+      return { width: this.labelWidth + "px" };
+    }
   }
 
   /**
@@ -224,11 +235,11 @@ export default class AppFormItem extends Vue {
    * @type {string}
    * @memberof AppFormItem
    */
-    get slotstyle():any{
-      if(Object.is(this.labelPos,'LEFT')){
-          return {marginLeft:this.labelWidth+'px'};
-      }else if(Object.is(this.labelPos,'RIGHT')){
-          return {marginRight:this.labelWidth+'px'};
+  get slotstyle(): any {
+    if (Object.is(this.labelPos, "LEFT")) {
+      return { marginLeft: this.labelWidth + "px" };
+    } else if (Object.is(this.labelPos, "RIGHT")) {
+      return { marginRight: this.labelWidth + "px" };
     }
   }
 
@@ -243,19 +254,17 @@ export default class AppFormItem extends Vue {
         const _rules: any[] = this.itemRules;
         this.rules = [..._rules];
         this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
+          if (rule.hasOwnProperty("required")) {
             this.required = rule.required;
             return true;
           }
           return false;
         });
-            } catch (error) {
+      } catch (error) {}
     }
   }
-    }
-
 }
 </script>
 <style lang='less'>
-@import './app-form-item.less';
+@import "./app-form-item.less";
 </style>
\ No newline at end of file