framework / eagle-web-toolkit

Download as
Browse Code »

Commit 250e00fbfcb99d32e0ab6013c88cb94560299689

Authored by Aaron
1 parent 8e63a16d
Exists in master and in 1 other branch legacy

form组件支持footer自定义插槽

Showing 2 changed files with 20 additions and 10 deletions   Show diff stats
examples/views/index.vue
  Diff comments   View file @250e00f
... ... @@ -63,7 +63,7 @@
63 63 <div class="cpt-title">表单生成器 eagle-form</div>
64 64 <div class="cpt-content">
65 65 {{ formValue }}
66   - <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure>
  66 + <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure :footer-style="{ 'text-align': 'right' }">
67 67 <template #group-not-bad="{ label, list }">
68 68 <div style="background: deepskyblue">哎哟 - {{ label }} - 标题 [{{ list.length }} 项]</div>
69 69 </template>
... ... @@ -76,6 +76,11 @@
76 76 <el-option value="B">B</el-option>
77 77 </el-select>
78 78 </template>
  79 + <template #footer="{ submit }">
  80 + <div style="background-color: #ccc;padding: 10px;text-align: center;">
  81 + <el-button type="success" size="large" @click="submit">提交</el-button>
  82 + </div>
  83 + </template>
79 84 </eagle-form>
80 85 </div>
81 86 </div>
... ... @@ -103,9 +108,9 @@ export default {
103 108 formList: [
104 109 { type: 'el-input', key: 'name', label: '名称', group: '那啥' },
105 110 { type: 'el-input', key: 'gender', label: '性别', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的', props: { disabled: true } },
106   - { type: 'eagle-select', key: 'address', label: '住址', default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
107   - { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '随便挑', placement: "left" } },
108   - { type: 'el-input', key: 'political', label: '政治面貌', visible: (model) => model.name === 'B' },
  111 + { type: 'eagle-select', key: 'address', label: '住址', span: 12, default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
  112 + { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '随便挑', placement: "left" } },
  113 + { type: 'el-input', key: 'political', label: '政治面貌', span: 12, visible: (model) => model.name === 'B' },
109 114 ]
110 115 }
111 116 },
... ...
packages/form/index.vue
  Diff comments   View file @250e00f
1   -<style scoped>
  1 +<style>
2 2 .eagle-form {
3 3 padding: 0px;
4 4 }
... ... @@ -18,7 +18,7 @@
18 18 <el-row :gutter="15">
19 19 <template v-for="(data, index) in listOption.dataList">
20 20 <template v-if="listOption.isGroup">
21   - <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="{...data}"></slot>
  21 + <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
22 22 <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">{{ data.label }}</el-col>
23 23 </template>
24 24 <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
... ... @@ -35,11 +35,11 @@
35 35 </el-row>
36 36 </template>
37 37 </el-row>
38   - <!-- 使用slot，不用slot时可定义对齐位置 -->
39   - <div style="text-align: right">
  38 + <slot v-if="$scopedSlots['footer'] || $slots['footer']" name="footer" :model="model" :submit="handleSubmit" :cancel="handleCancel"></slot>
  39 + <el-row :gutter="15" v-else style="text-align: center" :style="footerStyle">
40 40 <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button>
41 41 <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button>
42   - </div>
  42 + </el-row>
43 43 </el-form>
44 44 </template>
45 45  
... ... @@ -75,6 +75,11 @@ export default {
75 75 submitPure: {
76 76 type: Boolean,
77 77 default: false
  78 + },
  79 + // 底部样式
  80 + footerStyle: {
  81 + type: [String, Object],
  82 + default: 'center'
78 83 }
79 84 },
80 85 data() {
... ... @@ -139,7 +144,7 @@ export default {
139 144 list: []
140 145 };
141 146 }
142   - groupSet['group-default'].list.push(data);
  147 + groupSet['group-default'].list.push(data);
143 148 }
144 149 });
145 150 const isGroup = Object.keys(groupSet).length > 1;
... ...