form组件支持footer自定义插槽

Aaron
1 parent 8e63a16d
Showing 2 changed files with 20 additions and 10 deletions Show diff stats
examples/views/index.vue
packages/form/index.vue
@@ -63,7 +63,7 @@
     <div class="cpt-title">表单生成器 eagle-form</div>
     <div class="cpt-content">
       {{ formValue }}
-      <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure>
+      <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure :footer-style="{ 'text-align': 'right' }">
         <template #group-not-bad="{ label, list }">
           <div style="background: deepskyblue">哎哟 - {{ label }} - 标题 [{{ list.length }} 项]</div>
         </template>
@@ -76,6 +76,11 @@
             <el-option value="B">B</el-option>
           </el-select>
         </template>
+        <template #footer="{ submit }">
+          <div style="background-color: #ccc;padding: 10px;text-align: center;">
+            <el-button type="success" size="large" @click="submit">提交</el-button>
+          </div>
+        </template>
       </eagle-form>
     </div>
   </div>
@@ -103,9 +108,9 @@ export default {
       formList: [
         { type: 'el-input', key: 'name', label: '名称', group: '那啥' },
         { type: 'el-input', key: 'gender', label: '性别', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的', props: { disabled: true } },
-        { type: 'eagle-select', key: 'address', label: '住址', default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
-        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '随便挑', placement: "left" } },
-        { type: 'el-input', key: 'political', label: '政治面貌', visible: (model) => model.name === 'B' },
+        { type: 'eagle-select', key: 'address', label: '住址', span: 12, default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
+        { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '随便挑', placement: "left" } },
+        { type: 'el-input', key: 'political', label: '政治面貌', span: 12, visible: (model) => model.name === 'B' },
       ]
     }
   },
-<style scoped>
+<style>
 .eagle-form {
   padding: 0px;
 }
@@ -18,7 +18,7 @@
     <el-row :gutter="15">
       <template v-for="(data, index) in listOption.dataList">
         <template v-if="listOption.isGroup">
-          <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="{...data}"></slot>
+          <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
           <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">{{ data.label }}</el-col>
         </template>
         <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
@@ -35,11 +35,11 @@
         </el-row>
       </template>
     </el-row>
-    <!-- 使用slot，不用slot时可定义对齐位置 -->
-    <div style="text-align: right">
+    <slot v-if="$scopedSlots['footer'] || $slots['footer']" name="footer" :model="model" :submit="handleSubmit" :cancel="handleCancel"></slot>
+    <el-row :gutter="15" v-else style="text-align: center" :style="footerStyle">
       <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button>
       <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button>
-    </div>
+    </el-row>
   </el-form>
 </template>
@@ -75,6 +75,11 @@ export default {
     submitPure: {
       type: Boolean,
       default: false
+    },
+    // 底部样式
+    footerStyle: {
+      type: [String, Object],
+      default: 'center'
     }
   },
   data() {
@@ -139,7 +144,7 @@ export default {
               list: []
             };
           }
-          groupSet['group-default'].list.push(data); 
+          groupSet['group-default'].list.push(data);
         }
       });
       const isGroup = Object.keys(groupSet).length > 1;