优化新式表单自定义类名

Aaron
1 parent 600fee60
Showing 3 changed files with 21 additions and 6 deletions Show diff stats
examples/views/page/form-new/form-render.vue
examples/views/page/form-new/index.vue
examples/views/page/other.vue
 <template>
   <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
-  <component :is="rowComponent" class="eagle-form__flex-wrap" :class="contentClass || 'eagle-form__group-content'">
+  <component :is="rowComponent" class="eagle-form__flex-wrap">
     <template v-for="(item, index) in list">
       <!-- 表单项有设置分组时 -->
       <component :is="colComponent" v-if="item.group && item.list" :key="index"
         :span="type === 'div' ? undefined : item.group.span || 24" :style="{ width: type === 'div' ? '100%' : undefined }"
       >
-        <component :is="rowComponent" class="eagle-form__flex-wrap">
+        <component :is="rowComponent" class="eagle-form__flex-wrap" :class="groupClass || 'eagle-form__group'">
           <!-- 表单分组标题 -->
           <component :is="rowComponent" :class="titleClass || 'eagle-form__group-title'" v-if="item.group.title" style="width: 100%;">
             {{ item.group.title || item.group }}
           </component>
           <!-- 递归本组件 -->
-          <form-render :title-class="titleClass" :item-class="itemClass" :list="item.list" :value="value"
+          <form-render :title-class="titleClass" :item-class="itemClass" :content-class="contentClass" :group-class="groupClass"
+            :class="contentClass || 'eagle-form__group-content'" :list="item.list" :value="value"
             :model="itemKey ? model[itemKey] || {} : model" :itemKey="item.group.key" :type="type"
             @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
             :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))"
@@ -45,6 +46,7 @@ export default {
     titleClass: String,
     contentClass: String,
     itemClass: String,
+    groupClass: String,
     type: String,
     span: Number,
   },
@@ -23,8 +23,8 @@
 <template>
   <el-form ref="form" size="mini" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
-    <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :list="formList" :value="model"
-      :model="model" :span="span" :type="type"
+    <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :group-class="groupClass"
+      :list="formList" :value="model" :model="model" :span="span" :type="type"
       @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
     ></form-render>
   </el-form>
@@ -44,6 +44,7 @@ export default {
     titleClass: String,
     contentClass: String,
     itemClass: String,
+    groupClass: String,
     labelWidth: String,
     labelPosition: String,
     type: String,
@@ -7,12 +7,23 @@
 }
 .custom-content {
   background: #fcc;
+  margin: 10px;
+}
+.custom-item {
+  background: #fcf;
+}
+.custom-group {
+  background: #ffffff;
+  padding: 0;
+  border: 1px solid grey;
+  margin: 10px;
+  box-shadow: -2px 2px 8px grey;
 }
 </style>
 <template>
   <div>
-    <pre>{{ tableData }}</pre>
+    <pre>{{ model }}</pre>
     <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable
       @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete"
     >
@@ -32,6 +43,7 @@
     <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
     <eg-form
       ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
+      group-class="custom-group"
       form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
     ></eg-form>
   </div>