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