优化表单布局

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

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

 <template>
-    <div>
-        <div v-if="this.uiStyle === 'STYLE2'">
-             <app-form-item2
+    <div class="app-form-item-wrapper">
+        <template v-if="this.uiStyle === 'STYLE2'">
+            <app-form-item2
                 :caption="caption"
                 :labelStyle="labelStyle"
                 :error="error"
@@ -14,248 +14,257 @@
                 :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">
+                </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="editor"
+                    :style="slotstyle"
+                >
                     <slot></slot>
-                  </div>
+                </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 {
+  /**
+   * 名称
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public caption!: string;
 
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public caption!: string;
-
-    /**
-     * 错误信息
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public error?: string;
+  /**
+   * 错误信息
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public error?: string;
 
-    /**
-     * label样式
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public labelStyle?: string;
+  /**
+   * label样式
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public labelStyle?: string;
 
-    /**
-     * 标签位置
-     *
-     * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
-     * @memberof AppFormItem
-     */
-    @Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
+  /**
+   * 标签位置
+   *
+   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+   * @memberof AppFormItem
+   */
+  @Prop() public labelPos?:
+    | string
+    | "BOTTOM"
+    | "LEFT"
+    | "NONE"
+    | "RIGHT"
+    | "TOP";
 
-    /**
-     * 标签宽度
-     *
-     * @type {number}
-     * @memberof AppFormItem
-     */
-    @Prop({}) public labelWidth!: number;
+  /**
+   * 标签宽度
+   *
+   * @type {number}
+   * @memberof AppFormItem
+   */
+  @Prop({}) public labelWidth!: number;
 
-    /**
-     * 是否显示标题
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    @Prop() public isShowCaption?: boolean;
+  /**
+   * 是否显示标题
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  @Prop() public isShowCaption?: boolean;
 
-    /**
-     * 标签是否空白
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    @Prop() public isEmptyCaption?: boolean;
+  /**
+   * 标签是否空白
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  @Prop() public isEmptyCaption?: boolean;
 
-    /**
-     * 表单项名称
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public name!: string;
+  /**
+   * 表单项名称
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public name!: string;
 
-    /**
-     * 内置样式
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public uiStyle?: string;
+  /**
+   * 内置样式
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public uiStyle?: string;
 
-    /**
-     * 表单项值规则
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public itemRules!: any;
+  /**
+   * 表单项值规则
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public itemRules!: any;
 
-    /**
-     * 值规则数组
-     *
-     * @type {any[]}
-     * @memberof AppFormItem
-     */
-    public rules: any[] = [];
+  /**
+   * 值规则数组
+   *
+   * @type {any[]}
+   * @memberof AppFormItem
+   */
+  public rules: any[] = [];
 
-    /**
-     * 是否必填
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    public required: boolean = false;
+  /**
+   * 是否必填
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  public required: boolean = false;
 
-    /**
-     * 表单项值规则监控
-     *
-     * @param {*} newVal
-     * @param {*} oldVal
-     * @memberof AppFormItem
-     */
-    @Watch('itemRules',{deep:true})
-    onItemRulesChange(newVal: any, oldVal: any) {
-        if (newVal) {
-            try {
-                this.rules = [];
-                const _rules: any[] = newVal;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
-        }
+  /**
+   * 表单项值规则监控
+   *
+   * @param {*} newVal
+   * @param {*} oldVal
+   * @memberof AppFormItem
+   */
+  @Watch("itemRules", { deep: true })
+  onItemRulesChange(newVal: any, oldVal: any) {
+    if (newVal) {
+      try {
+        this.rules = [];
+        const _rules: any[] = newVal;
+        this.rules = [..._rules];
+        this.rules.some((rule: any) => {
+          if (rule.hasOwnProperty("required")) {
+            this.required = rule.required;
+            return true;
+          }
+          return false;
+        });
+      } catch (error) {}
     }
+  }
 
-    /**
-     * 计算样式
-     *
-     * @readonly
-     * @type {string []}
-     * @memberof AppFormItem
-     */
-    get classes(): string[] {
-        let posClass = '';
-        switch (this.labelPos) {
-          case 'TOP':
-            posClass = 'app-form-item-label-top';
-            break;
-          case 'LEFT':
-            posClass = 'app-form-item-label-left';
-            break;
-          case 'BOTTOM':
-            posClass = 'app-form-item-label-bottom';
-            break;
-          case 'RIGHT':
-            posClass = 'app-form-item-label-right';
-            break;
-          case 'NONE':
-            posClass = 'app-form-item-label-none';
-            break;
-        }
-        return [
-            'app-form-item',
-            posClass
-        ];
+  /**
+   * 计算样式
+   *
+   * @readonly
+   * @type {string []}
+   * @memberof AppFormItem
+   */
+  get classes(): string[] {
+    let posClass = "";
+    switch (this.labelPos) {
+      case "TOP":
+        posClass = "label-top";
+        break;
+      case "LEFT":
+        posClass = "label-left";
+        break;
+      case "BOTTOM":
+        posClass = "label-bottom";
+        break;
+      case "RIGHT":
+        posClass = "label-right";
+        break;
+      case "NONE":
+        posClass = "label-none";
+        break;
     }
+    return [ "app-form-item", posClass ];
+  }
 
-    /**
-     * label样式
-     *
-     * @readonly
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    get labelclasses():string{
-        return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label';
-    }
+  /**
+   * label样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  get labelclasses(): string {
+    return this.labelStyle
+      ? this.labelStyle + " app-form-item-label"
+      : "app-form-item-label";
+  }
 
-    /**
-     * label行内样式
-     *
-     * @readonly
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    get labelstyle():any{
-        return {width:this.labelWidth+'px'};
+  /**
+   * label行内样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  get labelstyle(): any {
+    if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
+      return { width: this.labelWidth + "px" };
     }
+  }
 
-    /**
-     * slot行内样式
-     *
-     * @readonly
-     * @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'};
-      }
+  /**
+   * slot行内样式
+   *
+   * @readonly
+   * @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" };
     }
+  }
 
-    /**
-     * vue 生命周期
-     *
-     * @memberof AppFormItem
-     */
-    public mounted() {
-        if (this.itemRules) {
-            try {
-                const _rules: any[] = this.itemRules;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
-        }
+  /**
+   * vue 生命周期
+   *
+   * @memberof AppFormItem
+   */
+  public mounted() {
+    if (this.itemRules) {
+      try {
+        const _rules: any[] = this.itemRules;
+        this.rules = [..._rules];
+        this.rules.some((rule: any) => {
+          if (rule.hasOwnProperty("required")) {
+            this.required = rule.required;
+            return true;
+          }
+          return false;
+        });
+      } catch (error) {}
     }
-
+  }
 }
 </script>
 <style lang='less'>
-@import './app-form-item.less';
+@import "./app-form-item.less";
 </style>
\ No newline at end of file