update：更新

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

 <template>
-    <div :class="classes">
-        <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="editor">
-            <div :class="valueCheck == true ?'':'editorstyle'">
-              <slot ></slot>
-              <span :class="error ? 'errorstyle':''">{{error}}</span>
-            </div>
-        </div>
-        <div v-if="!Object.is(labelPos,'NONE')" class="app-panel-field-label">
-            <span v-if="required" style="color:red;">* </span>
-            {{isEmptyCaption ? '' : caption}}
-        </div>
-        <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="editor">
-          <div :class="valueCheck == true ?'':'editorstyle'">
-            <slot ></slot>
-            <span :class="error ? 'errorstyle':''">{{error}}</span>
-          </div>
-        </div>
+  <div :class="curClassName" :style="curStyle">
+    <div v-if="Object.is(labelPos, 'NONE') || !labelPos" class="editor">
+      <div :class="valueCheck == true ? '' : 'editorstyle'">
+        <slot></slot>
+        <span :class="error ? 'errorstyle' : ''">{{ error }}</span>
+      </div>
     </div>
+    <div v-if="!Object.is(labelPos, 'NONE')" class="app-panel-field-label">
+      <span v-if="required" style="color: red">* </span>
+      <span v-if="showCaption">{{caption}}</span>
+    </div>
+    <div
+      v-if="
+        Object.is(labelPos, 'BOTTOM') ||
+        Object.is(labelPos, 'TOP') ||
+        Object.is(labelPos, 'LEFT') ||
+        Object.is(labelPos, 'RIGHT')
+      "
+      class="editor"
+    >
+      <div :class="valueCheck == true ? '' : 'editorstyle'">
+        <slot></slot>
+        <span :class="error ? 'errorstyle' : ''">{{ error }}</span>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@@ -29,113 +37,130 @@ export default class AppPanelField extends Vue {
    * @type {string}
    * @memberof AppPanelField
    */
-  @Prop() public caption!: string;
+  @Prop() public name!: string;
 
   /**
-   * 错误信息
+   * 标题
    *
    * @type {string}
    * @memberof AppPanelField
    */
-  @Prop() public error?: string;
+  @Prop() public caption!: string;
 
   /**
-   * 标签位置
+   * 下标
    *
-   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+   * @type {string}
    * @memberof AppPanelField
    */
-  @Prop() public labelPos?:
-    | string
-    | "BOTTOM"
-    | "LEFT"
-    | "NONE"
-    | "RIGHT"
-    | "TOP";
+  @Prop({ default: 0 }) public index?: number;
 
   /**
-   * 标签是否空白
+   * 编辑器值
    *
-   * @type {boolean}
+   * @type {any}
    * @memberof AppPanelField
    */
-  @Prop() public isEmptyCaption?: boolean;
+  @Prop() public value!: any;
 
   /**
-   * 列表项名称
+   * 布局模型详情
    *
-   * @type {string}
+   * @type {*}
    * @memberof AppPanelField
    */
-  @Prop() public name!: string;
+  @Prop() public layoutModelDetails!: any;
 
   /**
-   * 面板数据
+   * 项名称
    *
-   * @type {any}
    * @memberof AppPanelField
    */
-  @Prop() public data!: any;
+  get itemName() {
+    return this.index ? `${this.name}_${this.index}` : this.name;
+  }
 
   /**
-   * 编辑器值
+   * 显示标题
    *
-   * @type {any}
    * @memberof AppPanelField
    */
-  @Prop() public value !: any;
+  get showCaption() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.isShowCaption;
+    }
+  }
 
   /**
-   * 值规则
+   * 类名
    *
-   * @type {string}
    * @memberof AppPanelField
    */
-  @Prop() public itemRules!: any;
-  
+  get curClassName() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      let posClass = "";
+      switch (layoutModel.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-panel-field ${posClass} ${this.itemName} ${layoutModel.sysCss}`;
+    }
+  }
+
   /**
-   * 是否必填
+   * 样式
    *
-   * @type {boolean}
    * @memberof AppPanelField
    */
-  public required: boolean = false;
+  get curStyle() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.getElementStyle();
+    }
+  }
 
   /**
-   * 值规则数组
+   * 标签位置
    *
-   * @type {any[]}
    * @memberof AppPanelField
    */
-  public rules: any[] = [];
+  get labelPos() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.labelPos || "LEFT";
+    }
+    return "LEFT";
+  }
 
   /**
-   * 值规则监控
+   * 必填
    *
-   * @param {*} newVal
-   * @param {*} oldVal
    * @memberof AppPanelField
    */
-  @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) {}
+  get required() {
+    const layoutModel = this.layoutModelDetails[this.itemName];
+    if (layoutModel) {
+      return layoutModel.required;
     }
   }
 
   /**
-   * 编辑器样式
+   * 值校验
    *
    * @type {boolean}
    * @memberof AppPanelField
@@ -150,61 +175,11 @@ export default class AppPanelField extends Vue {
    * @memberof AppPanelField
    */
   @Watch("value")
-  ItemValueRules(newVal: any, oldVal: any) {
-    if(this.required && !newVal) {
-        this.valueCheck = false;
-    }else{
-        this.valueCheck = true;
-    }
-  }
-
-  /**
-   * 计算样式
-   *
-   * @readonly
-   * @type {string []}
-   * @memberof AppPanelField
-   */
-  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-panel-field", posClass ];
-  }
-
-  /**
-   * vue 生命周期
-   *
-   * @memberof AppPanelField
-   */
-  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) {}
+  itemValueRules(newVal: any, oldVal: any) {
+    if (this.required && !newVal) {
+      this.valueCheck = false;
+    } else {
+      this.valueCheck = true;
     }
   }
 }