面板属性组件

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

 .app-panel-item {
   height: 100%;
+  width: 100%;
+  display: flex;
   padding: 0 6px;
-  .editor {
-      height: 100%;
-      .ivu-form-item-content {
-          height: 100%;
-          min-height: 36px;
-      }
+  .editor{
+    flex-grow: 1;
+    height: 34px !important;
   }
   .app-panel-item-label {
-      padding: 6px 10px 6px 0px;
-
+    height: 34px !important;
+    line-height: 25px;
+    flex-shrink: 0;
+    padding: 6px 10px 6px 0px;
   }
 }
 
-.app-panel-item.label-top, .app-panel-item.label-bottom {
-  .app-panel-item-label {
-      display: block;
-  }
+.app-panel-item.label-top {
+  flex-flow: column;
 }
 
-.app-panel-item.label-left, .app-panel-item.label-right {
-  .app-panel-item-label, .editor {
-      height: 100%;
-      
-  }
+.app-panel-item.label-bottom{
+  flex-flow: column-reverse;
 }
 
 .app-panel-item.label-left {
   .app-panel-item-label {
-      float: left;
       text-align: right;
-      position: absolute;
-      top: 2px;
   }
 }
 
 .app-panel-item.label-right {
+  flex-flow: row-reverse;
   .app-panel-item-label {
-      float: right;
       padding: 6px 0px 6px 10px;
-      position: absolute;
-      top: 2px;
-      right: 16px;
   }
 }
 

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

 <template>
     <div :class="classes">
-        <div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="editor" :style="slotstyle">
+        <div v-if="Object.is(this.labelPos,'NONE') || !this.labelPos" class="editor">
             <div :class="valueCheck == true ?'':'editorStyle'">
               <slot ></slot>
             </div>
         </div>
-        <span v-if="!Object.is(this.labelPos,'NONE') && this.labelWidth > 0" :style="labelstyle" :class="labelclasses">
+        <div v-if="!Object.is(this.labelPos,'NONE')" class="app-panel-item-label">
             <span v-if="required" style="color:red;">* </span>
             {{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">
+        </div>
+        <div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="editor">
           <div :class="valueCheck == true ?'':'editorStyle'">
             <slot ></slot>
           </div>
@@ -59,14 +59,6 @@ export default class AppPanelItem extends Vue {
     | "RIGHT"
     | "TOP";
 
-  /**
-   * 标签宽度
-   *
-   * @type {number}
-   * @memberof AppPanelItem
-   */
-  @Prop({}) public labelWidth!: number;
-
   /**
    * 标签是否空白
    *
@@ -201,47 +193,6 @@ export default class AppPanelItem extends Vue {
     return [ "app-panel-item", posClass ];
   }
 
-  /**
-   * label样式
-   *
-   * @readonly
-   * @type {string}
-   * @memberof AppPanelItem
-   */
-  get labelclasses(): string {
-    return this.labelStyle
-      ? this.labelStyle + " app-panel-item-label"
-      : "app-panel-item-label";
-  }
-
-  /**
-   * label行内样式
-   *
-   * @readonly
-   * @type {string}
-   * @memberof AppPanelItem
-   */
-  get labelstyle(): any {
-    if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
-      return { width: this.labelWidth + "px" };
-    }
-  }
-
-  /**
-   * slot行内样式
-   *
-   * @readonly
-   * @type {string}
-   * @memberof AppPanelItem
-   */
-  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 生命周期
    *