Commit b90d3572a9797d0c87ea27bf1a4a3f62eb3bc52c
Committed by
GitHub
1 parent
16574395
fix(AppendForm): 修复 批量添加表单配置 按钮点击事件未使用批量方法 问题; 表单排版改用baseColProps一次配置,减少重复代码 (#2504)
* fix(AppendForm): 修复 批量添加表单配置 按钮点击事件未使用批量方法 问题 * perf(AppendForm): 表单排版改用baseColProps一次配置,减少重复代码 Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
Showing
1 changed file
with
4 additions
and
28 deletions
src/views/demo/form/AppendForm.vue
@@ -4,7 +4,9 @@ | @@ -4,7 +4,9 @@ | ||
4 | <BasicForm @register="register" @submit="handleSubmit"> | 4 | <BasicForm @register="register" @submit="handleSubmit"> |
5 | <template #add="{ field }"> | 5 | <template #add="{ field }"> |
6 | <Button v-if="Number(field) === 0" @click="add">+</Button> | 6 | <Button v-if="Number(field) === 0" @click="add">+</Button> |
7 | - <Button class="ml-2" v-if="Number(field) === 0" @click="add">批量添加表单配置</Button> | 7 | + <Button class="ml-2" v-if="Number(field) === 0" @click="batchAdd"> |
8 | + 批量添加表单配置 | ||
9 | + </Button> | ||
8 | <Button v-if="field > 0" @click="del(field)">-</Button> | 10 | <Button v-if="field > 0" @click="del(field)">-</Button> |
9 | </template> | 11 | </template> |
10 | </BasicForm> | 12 | </BasicForm> |
@@ -28,32 +30,24 @@ | @@ -28,32 +30,24 @@ | ||
28 | field: 'field0a', | 30 | field: 'field0a', |
29 | component: 'Input', | 31 | component: 'Input', |
30 | label: '字段0', | 32 | label: '字段0', |
31 | - colProps: { | ||
32 | - span: 8, | ||
33 | - }, | ||
34 | required: true, | 33 | required: true, |
35 | }, | 34 | }, |
36 | { | 35 | { |
37 | field: 'field0b', | 36 | field: 'field0b', |
38 | component: 'Input', | 37 | component: 'Input', |
39 | label: '字段0', | 38 | label: '字段0', |
40 | - colProps: { | ||
41 | - span: 8, | ||
42 | - }, | ||
43 | required: true, | 39 | required: true, |
44 | }, | 40 | }, |
45 | { | 41 | { |
46 | field: '0', | 42 | field: '0', |
47 | component: 'Input', | 43 | component: 'Input', |
48 | label: ' ', | 44 | label: ' ', |
49 | - colProps: { | ||
50 | - span: 8, | ||
51 | - }, | ||
52 | slot: 'add', | 45 | slot: 'add', |
53 | }, | 46 | }, |
54 | ], | 47 | ], |
55 | labelWidth: 100, | 48 | labelWidth: 100, |
56 | actionColOptions: { span: 24 }, | 49 | actionColOptions: { span: 24 }, |
50 | + baseColProps: { span: 8 }, | ||
57 | }); | 51 | }); |
58 | 52 | ||
59 | async function handleSubmit() { | 53 | async function handleSubmit() { |
@@ -73,9 +67,6 @@ | @@ -73,9 +67,6 @@ | ||
73 | field: `field${n.value}a`, | 67 | field: `field${n.value}a`, |
74 | component: 'Input', | 68 | component: 'Input', |
75 | label: '字段' + n.value, | 69 | label: '字段' + n.value, |
76 | - colProps: { | ||
77 | - span: 8, | ||
78 | - }, | ||
79 | required: true, | 70 | required: true, |
80 | }, | 71 | }, |
81 | '', | 72 | '', |
@@ -85,9 +76,6 @@ | @@ -85,9 +76,6 @@ | ||
85 | field: `field${n.value}b`, | 76 | field: `field${n.value}b`, |
86 | component: 'Input', | 77 | component: 'Input', |
87 | label: '字段' + n.value, | 78 | label: '字段' + n.value, |
88 | - colProps: { | ||
89 | - span: 8, | ||
90 | - }, | ||
91 | required: true, | 79 | required: true, |
92 | }, | 80 | }, |
93 | '', | 81 | '', |
@@ -98,9 +86,6 @@ | @@ -98,9 +86,6 @@ | ||
98 | field: `${n.value}`, | 86 | field: `${n.value}`, |
99 | component: 'Input', | 87 | component: 'Input', |
100 | label: ' ', | 88 | label: ' ', |
101 | - colProps: { | ||
102 | - span: 8, | ||
103 | - }, | ||
104 | slot: 'add', | 89 | slot: 'add', |
105 | }, | 90 | }, |
106 | '', | 91 | '', |
@@ -117,27 +102,18 @@ | @@ -117,27 +102,18 @@ | ||
117 | field: `field${n.value}a`, | 102 | field: `field${n.value}a`, |
118 | component: 'Input', | 103 | component: 'Input', |
119 | label: '字段' + n.value, | 104 | label: '字段' + n.value, |
120 | - colProps: { | ||
121 | - span: 8, | ||
122 | - }, | ||
123 | required: true, | 105 | required: true, |
124 | }, | 106 | }, |
125 | { | 107 | { |
126 | field: `field${n.value}b`, | 108 | field: `field${n.value}b`, |
127 | component: 'Input', | 109 | component: 'Input', |
128 | label: '字段' + n.value, | 110 | label: '字段' + n.value, |
129 | - colProps: { | ||
130 | - span: 8, | ||
131 | - }, | ||
132 | required: true, | 111 | required: true, |
133 | }, | 112 | }, |
134 | { | 113 | { |
135 | field: `${n.value}`, | 114 | field: `${n.value}`, |
136 | component: 'Input', | 115 | component: 'Input', |
137 | label: ' ', | 116 | label: ' ', |
138 | - colProps: { | ||
139 | - span: 8, | ||
140 | - }, | ||
141 | slot: 'add', | 117 | slot: 'add', |
142 | }, | 118 | }, |
143 | ], | 119 | ], |