From 06249cc2283ac768f4e98fadf4a220846de9e22d Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 2 Jan 2020 16:00:39 +0800
Subject: [PATCH] 优化新式表单自定义类名

---
 examples/views/page/form-new/form-render.vue |  8 +++++---
 examples/views/page/form-new/index.vue       |  5 +++--
 examples/views/page/other.vue                | 14 +++++++++++++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/examples/views/page/form-new/form-render.vue b/examples/views/page/form-new/form-render.vue
index ec402ff..259dcd9 100644
--- a/examples/views/page/form-new/form-render.vue
+++ b/examples/views/page/form-new/form-render.vue
@@ -1,18 +1,19 @@
 <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,
   },
diff --git a/examples/views/page/form-new/index.vue b/examples/views/page/form-new/index.vue
index 61314eb..1937781 100644
--- a/examples/views/page/form-new/index.vue
+++ b/examples/views/page/form-new/index.vue
@@ -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,
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 1aef334..9262572 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -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>
--
libgit2 0.21.0