YbFormily 配置式表单
在 yb-form 或者 yb-collapse-form 基础上形成 json 配置型的表单渲染，内置可用的表单控件，通过 type 配置即可显现
# type
内置的表单控件类型：
- input ==> 组件 el-input
- autoComplete ==> 组件 el-autocomplete
- textarea ==> 组件 el-input
- inputNumber ==> 组件 el-input-number
- select ==> 组件 yb-select
- radio ==> 组件 el-radio-group
- radioButton ==> 组件 el-radio-group
- checkbox ==> 组件 yb-checkbox-group
- colorPicker ==> 组件 el-color-picker
- datePicker ==> 组件 el-date-picker
- timePicker ==> 组件 el-time-picker
- switch ==> 组件 el-switch
- slider ==> 组件 el-slider
- rowsForm ==> 组件 yb-rows-form
- fileSelect ==> 组件 yb-file-select
- paginationSelect ==> 组件 yb-pagination-select
- rowsPopoverForm ==> 组件 yb-rows-popover-form
- tagsInput ==> 组件 yb-tags-input
- ...可自定义扩展
# 基本使用
yb-formily 的 v-model 是所有表单控件的值的对象，在初始化会从 formalData 获取默认值
label-width
label-position
label-suffix
size
disabled
inline
hide-required-asterisk
show-message
inline-message
status-icon
<template>
<div>
<el-row>
<el-col :span="10">
<div style="margin-bottom:20px">
label-width
<span
style="display:inline-block;width:200px;vertical-align: middle;"
><el-slider
v-model="formProps['label-width']"
:min="80"
:max="240"
></el-slider
></span>
</div>
<div style="margin-bottom:20px">
label-position
<el-radio-group
v-model="formProps['label-position']"
size="mini"
>
<el-radio-button label="left">left</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="top">top</el-radio-button>
</el-radio-group>
</div>
<div style="margin-bottom:20px">
label-suffix
<span
style="display:inline-block;width:200px;vertical-align: middle;"
>
<el-input
size="small"
v-model="formProps['label-suffix']"
></el-input
></span>
</div>
<div style="margin-bottom:20px">
size
<el-radio-group v-model="formProps['size']" size="mini">
<el-radio-button label="medium">medium</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
<el-radio-button label="mini">mini</el-radio-button>
</el-radio-group>
</div>
<div style="margin-bottom:20px">
disabled
<el-switch v-model="formProps['disabled']"></el-switch>
</div>
<div style="margin-bottom:20px">
inline
<el-switch v-model="formProps['inline']"></el-switch>
</div>
<div style="margin-bottom:20px">
hide-required-asterisk
<el-switch
v-model="formProps['hide-required-asterisk']"
></el-switch>
</div>
<div style="margin-bottom:20px">
show-message
<el-switch v-model="formProps['show-message']"></el-switch>
</div>
<div style="margin-bottom:20px">
inline-message
<el-switch
v-model="formProps['inline-message']"
></el-switch>
</div>
<div style="margin-bottom:20px">
status-icon
<el-switch v-model="formProps['status-icon']"></el-switch>
</div>
</el-col>
<el-col :span="12">
<yb-formily
ref="formily"
v-model="formValue"
:formalData="formalData"
:spans="{ span:24 }"
:label-width="formProps['label-width']+'px'"
:label-position="formProps['label-position']"
:size="formProps['size']"
:disabled="formProps['disabled']"
:inline="formProps['inline']"
:label-suffix="formProps['label-suffix']"
:status-icon="formProps['status-icon']"
:inline-message="formProps['inline-message']"
:show-message="formProps['show-message']"
:hide-required-asterisk="formProps['hide-required-asterisk']"
@submit="onSubmit"
@change="onChange"
>
<template v-slot:fieldkey1-append>
<i class="el-icon-setting" />
</template>
<template v-slot:formSubmitColumnAppended="{formModel}">
<el-button @click="appendItems">添加</el-button>
</template>
</yb-formily>
<div style="margin-top:20px">
<el-button @click="changeFieldValue"
>外部修改textarea控件值:我们的未来</el-button
>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
formValue: {},
formProps: {
'label-width': 120,
'label-position': 'left',
'label-suffix': '',
size: 'small',
disabled: false,
inline: false,
'hide-required-asterisk': false,
'show-message': true,
'inline-message': false,
'status-icon': false,
},
formalData: [
{
title: '基础信息',
name: 'basekey',
tooltip:
'折叠表单,属性扩展于yb-collapse-form和yb-collapse，非折叠表单，属性继承于yb-form',
headerStyle: { backgroundColor: '#F1F9FF' },
formalData: [
{
title: '',
type: 'paginationSelect',
field: 'values',
contentInfo:
'其中宝贵的而富有内涵的句子深深的影响到我，我的生活中遇到的问题原来是这么一回事的感慨，总是在细读的过程中不断地冒出，有种不愿读完却又忍不住的看下去的感受，读完之后就是想要试着按照其中的做法做些改变',
options: [],
// // 被控制的，
// controlled: {
// // 被控制是否渲染，当前控件是否渲染，取决于如何 return true/false
// rendered: function ({ formModel }) {
// return ['<', '≤', '≥', '>']
// .concat(['=', '≠', 'like'])
// .includes(formModel.filterType);
// },
// },
props: {
filterable: true,
remote: true,
multiple: true,
'reserve-keyword': true,
clearable: true,
onRemote: () => {
return Promise.resolve({
total: 2,
options: [
{
label: '门诊',
value: '门诊',
},
{
label: '住院',
value: '住院',
},
],
});
},
'allow-create': true,
'default-first-option': true,
searchWhenOpen: true,
asyncPagination: false,
placeholder: '请',
},
// validate: [
// {
// validator: (rule, value, callback) => {
// if (
// !Array.isArray(value) ||
// !value.length
// ) {
// return callback('必填');
// }
// if (
// ['<', '≤', '≥', '>'].includes(
// this.filterFormModel
// .filterType
// ) &&
// value.length > 1
// ) {
// return callback(
// '此类条件只能选一个值'
// );
// }
// callback();
// },
// trigger: 'change',
// },
// ],
// on: {
// change: this.onFormValueChange,
// },
},
{
field: 'fieldkey1',
type: 'input',
title: '输入框',
value: null,
props: { placeholder: '请' },
validate: [
{
required: true,
message: '必填',
type: 'string',
trigger: 'blur',
min: null,
max: null,
},
],
children: [
{
slot: 'append',
},
],
controlled: {
// rendered: function ({
// formItem,
// formModel,
// }) {},
showed: function ({ formItem, formModel }) {
if (formModel['Keyword'] == 3) {
return false;
}
},
},
info: '晚上就不要多吃了，吸收消化不是那么容易的',
},
{
props: null,
field: 'fieldKey2',
type: 'inputNumber',
title: '数字输入',
value: null,
props: { placeholder: '请' },
},
{
props: { controlsPosition: 'right' },
field: 'fieldKey2-1',
type: 'inputNumber',
title: '数字输入2',
value: null,
props: { placeholder: '请' },
children: [
{
slot: 'append',
render(
h,
{ config, formItem, formModel }
) {
return h('span', {}, '%');
},
},
],
},
{
props: { autosize: true, placeholder: '请' },
field: 'fieldKey3',
type: 'textarea',
title: '文本域',
value: null,
},
{
props: null,
field: 'fieldKey4',
type: 'select',
title: '下拉选择器',
value: 'text',
children: [
{
slot: 'prepend',
render(
h,
{ config, formItem, formModel }
) {
return h('span', {}, 'prepend');
},
},
],
validate: [
{
required: true,
message: '必填哦',
trigger: 'change',
},
],
options: [
{
label: 'text',
value: 'text',
disabled: false,
},
{
label: 'markdown',
value: 'markdown',
disabled: false,
},
],
},
{
props: null,
field: 'fieldKey5',
type: 'colorPicker',
title: '颜色选择器',
value: null,
},
{
props: null,
field: 'fieldKey6',
type: 'datePicker',
title: '日期选择器',
value: null,
},
{
props: null,
field: 'fieldKey7',
type: 'radioButton',
title: '单选按钮模式',
value: 'false',
options: [
{
label: 'YES',
value: 'true',
disabled: false,
},
{
label: 'NO',
value: 'false',
disabled: false,
},
],
},
{
props: null,
field: 'fieldKey8',
type: 'checkbox',
title: '多选框',
value: ['0'],
props: { isShowSelectAll: true },
options: [
{
label: 'YES',
value: '1',
disabled: false,
},
{
label: 'NO',
value: '0',
disabled: false,
},
],
},
{
props: null,
field: 'fieldKey9',
type: 'switch',
title: '开关',
value: null,
},
{
props: null,
field: 'fieldKey10',
type: 'slider',
title: '滑动条',
value: null,
},
{
props: null,
field: 'fieldKey11',
type: 'timePicker',
title: '时间选择器',
value: null,
},
{
field: 'fieldKey12',
type: 'autoComplete',
title: '自动补全的输入',
value: null,
validate: null,
props: { placeholder: '请' },
options: [
{
label: 'YES',
value: 'true',
disabled: false,
},
{
label: 'NO',
value: 'false',
disabled: false,
},
],
},
{
props: { labelPosition: 'top' },
field: 'fieldKey13',
type: 'rowsForm',
title: '多行表单',
value: [{ rowField1: '888' }],
formalData: [
{
props: null,
field: 'rowField1',
type: 'input',
title: '行内输入',
value: null,
},
],
},
{
props: {},
field: 'fieldKey900',
type: 'rowsPopoverForm',
title: '浮层多行表单',
value: [{ fieldKey: 'name' }],
formalData: [
{
title: '字段键名',
field: 'fieldKey',
type: 'input',
showInTitle: true,
fieldInfoAlign: 'center',
},
{
title: '字段标题',
field: 'fieldTitle',
type: 'input',
value: '阿贝多',
showInPopover: true,
showOverflowTooltip: true,
},
{
title: '对齐方式',
field: 'fieldAlign',
type: 'radioButton',
value: 'left',
options: [
{
label: '左',
value: 'left',
},
{
label: '中',
value: 'center',
},
{
label: '右',
value: 'right',
},
],
showInPopover: true,
},
{
title: '线在Y轴的值',
type: 'inputNumber',
field: 'herMarkLineVal',
props: {
// controlsPosition:'right'
},
},
{
title: '线颜色',
type: 'colorPicker',
field: 'herMarkLineColor',
value: '',
},
{
title: '线宽度',
type: 'slider',
value: 1,
field: 'herMarkLineWidth',
props: {
showInput: true,
showInputControls: true,
inputSize: 'mini',
min: 1,
max: 20,
},
// 不是表单的属性，用于渲染时是否等比缩放的标识
scaleInLayout: true,
},
{
title: '线类型',
type: 'select',
value: 'dashed',
field: 'herMarkLineType',
options: [
{
label: '实线',
value: 'solid',
},
{
label: '虚线',
value: 'dashed',
},
{
label: '点线',
value: 'dotted',
},
],
},
{
title: '线类型',
type: 'checkbox',
value: 'dashed',
field: 'herMarkLineTypecheckbox',
options: [
{
label: '实线',
value: 'solid',
},
{
label: '虚线',
value: 'dashed',
},
{
label: '点线',
value: 'dotted',
},
],
},
{
title: '线类型',
type: 'radio',
value: 'dashed',
field: 'herMarkLineTyperadio',
options: [
{
label: '实线',
value: 'solid',
},
{
label: '虚线',
value: 'dashed',
},
{
label: '点线',
value: 'dotted',
},
],
},
{
title: '名称',
type: 'input',
field: 'herMarkLineName',
value: '',
},
{
title: '名称颜色',
type: 'colorPicker',
field: 'herMarkLineNameColor',
value: '',
},
{
title: '名称字体大小',
type: 'slider',
value: 12,
field: 'herMarkLineFontSize',
props: {
showInput: true,
showInputControls: false,
inputSize: 'mini',
min: 5,
max: 40,
},
// 不是表单的属性，用于渲染时是否等比缩放的标识
scaleInLayout: true,
},
{
title: '名称位置',
type: 'select',
field: 'herMarkLineNamePosition',
value: 'end',
options: [
{
label: '线的起始点',
value: 'start',
},
{
label: '线的中点',
value: 'middle',
},
{
label: '线的结束点',
value: 'end',
},
],
},
{
title: '名称远离轴线',
type: 'slider',
value: 8,
field: 'herMarkLineNameMargin',
info: '标签与线之间的距离',
props: {
showInput: true,
showInputControls: false,
inputSize: 'mini',
min: -100,
max: 100,
},
},
],
},
],
},
],
};
},
methods: {
onSubmit(values) {
this.$alert(values);
},
appendItems() {
this.i = 1 + (this.i || 20);
// 在 字段field为'fieldKey13'的前面添加新的字段
this.$refs['formily'].operate.before('fieldKey13').append([
{
props: null,
field: 'fielKey' + this.i,
type: 'input',
title: '有的么得',
value: '读后感',
},
]);
// 后续提供更简便的方法
},
changeFieldValue() {
this.formValue.fieldKey3 = '我们的未来';
},
onChange(value, data) {
console.log(value, data, 'formily change');
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
显示 复制 复制
# 插槽的使用
- 在提交和重置按钮区域后面添加内容的插槽名称: "formSubmitColumnAppended"
- 自定义提交和重置按钮区域整个区域的插槽名称: "formSubmitColumn"
- 扩展表单控件类型的插槽名称: "type-"+自定义类型名称
<template>
<yb-formily :formalData="formalData" labelPosition="top" @submit="onSubmit">
<template #type-codeEditor="{ formModel, config,formItem}">
<yb-codemirror-sql
v-model="formModel[formItem.prop]"
v-bind="config.props"
/>
</template>
<template v-slot:formSubmitColumn="{formModel, doSubmit, doReset}">
<el-button native-type="submit">提交按钮</el-button>
<el-button @click="doReset">重置</el-button>
</template>
</yb-formily>
</template>
<script>
export default {
data() {
return {
formalData: [
{
type: 'input',
title: '输入框',
field: 'key1',
},
{
type: 'codeEditor',
title: '自定义类型',
field: 'key2',
props: {
autosize: { minRows: 6 },
},
},
],
};
},
methods: {
onSubmit(values) {
this.$alert(values);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
显示 复制 复制
# 操作方法
直接在原 formalData 中添加新的字段，可能会很繁琐，yb-formily 提供 operate 对象，里面有一些方法以便新增、替换字段
/**
* 在第一层所有字段最后面新增字段
*/
this.$refs['formily'].operate.append([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
/**
* 在某个字段之后新增字段
*/
this.$refs['formily'].operate.after('field').append([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
/**
* 在某个字段之前新增字段
*/
this.$refs['formily'].operate.before('field').append([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
/**
* 在某个折叠项添加字段，或者多行表单控件添加字段
*/
this.$refs['formily'].operate.find('field').appendChild([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
/**
* 在某个字段之后的所有字段替换成新的字段
*/
this.$refs['formily'].operate.start('field').replaceWith([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
/**
* 在介于某两个字段之间的所有字段替换成新的字段，默认是包括了start那个和end那个字段都会被替换，
* 如不包括，
* 在start方法之后调用excludeStart()
* 在end方法之后调用excludeEnd()
*/
this.$refs['formily'].operate
.start('field1')
.end('field2')
.replaceWith([
{
type: 'input',
title: '输入框1',
field: 'newKey1',
},
{
type: 'input',
title: '输入框2',
field: 'newKey2',
},
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
after、before 、start、end 和 find 方法都支持多层精确字段位置
例如 after('level1field','level2field').append([])
const formalData = [
{
name: 'level1field',
formalData: [
{
type: 'input',
field: 'level2field',
},
// ... 在此位置新增字段
],
},
];
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
例如 after('level1field','level2field','level3field').append([])
const formalData = [
{
name: 'level1field',
formalData: [
{
type: 'rowForm',
field: 'level2field',
formalData: [
{ type: 'input', field: 'level3field' },
// ... 在此位置新增字段
],
},
],
},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>
<el-row :gutter="16">
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="append1">在末尾追加字段</el-button>
</div>
<yb-formily
ref="formily1"
:formalData="formalData1"
labelPosition="left"
labelWidth="80px"
size="mini"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="append2">在字段之后添加字段</el-button>
</div>
<yb-formily
ref="formily2"
size="mini"
:formalData="formalData1"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="append3">在字段之前添加字段</el-button>
</div>
<yb-formily
ref="formily3"
size="mini"
:formalData="formalData1"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="append4">在字段之间替换字段</el-button>
</div>
<yb-formily
ref="formily4"
size="mini"
:formalData="formalData1"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="collapse1">追加折叠项字段</el-button>
<el-button @click="addCollapse">追加折叠项</el-button>
</div>
<yb-formily
ref="collapse1"
size="mini"
:formalData="formalData2"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="collapse2">在字段之后添加字段</el-button>
</div>
<yb-formily
ref="collapse2"
size="mini"
:formalData="formalData2"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="collapse3">在字段之前添加字段</el-button>
</div>
<yb-formily
ref="collapse3"
size="mini"
:formalData="formalData2"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
<el-col :span="6">
<div style="margin-bottom:10px">
<el-button @click="collapse4">在字段之间替换字段</el-button>
</div>
<yb-formily
ref="collapse4"
size="mini"
:formalData="formalData2"
labelPosition="left"
labelWidth="80px"
@submit="onSubmit"
>
</yb-formily>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
formalData1: [
{
type: 'input',
title: '输入框1',
field: 'key1',
},
{
type: 'input',
title: '输入框2',
field: 'key2',
},
{
type: 'input',
title: '输入框3',
field: 'key3',
},
],
formalData2: [
{
title: '基础',
name: 'colakey1',
formalData: [
{
type: 'input',
title: '输入框1',
field: 'key1',
},
{
type: 'input',
title: '输入框2',
field: 'key2',
},
],
},
{
title: '其他',
name: 'colakey2',
formalData: [
{
type: 'input',
title: '输入框3',
field: 'key3',
},
{
type: 'input',
title: '输入框4',
field: 'key4',
},
{
type: 'input',
title: '输入框5',
field: 'key5',
},
],
},
],
};
},
methods: {
onSubmit(values) {
this.$alert(values);
},
append1() {
this.$refs['formily1'].operate.append([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
append2() {
this.$refs['formily2'].operate.after('key1').append([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
append3() {
this.$refs['formily3'].operate.before('key1').append([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
append4() {
this.$refs['formily4'].operate
.start('key1')
.end('key3')
.replaceWith([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
addCollapse() {
this.$refs['collapse1'].operate.after('colakey1').append([
{
title: '更多字段',
name: 'newColla',
formalData: [
{
type: 'inputNumber',
title: '新增10',
field: 'newKey10',
},
{
type: 'input',
title: '新增20',
field: 'newKey20',
},
],
},
]);
},
collapse1() {
this.$refs['collapse1'].operate.find('colakey1').appendChild([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
collapse2() {
this.$refs['collapse2'].operate
.after('colakey1', 'key2')
.append([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
collapse3() {
this.$refs['collapse3'].operate
.before('colakey2', 'key3')
.append([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
collapse4() {
// 在key4之后的替换成以下字段
this.$refs['collapse4'].operate
.start('colakey2', 'key4')
.excludeStart()
.replaceWith([
{
type: 'inputNumber',
title: '新增1',
field: 'newKey1',
},
{
type: 'input',
title: '新增2',
field: 'newKey2',
},
]);
},
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
显示 复制 复制
# 渲染数据结构 formalData
/**
* 非折叠表单
*/
const formalData = [
{
// 控件类型
type: 'input',
// 字段显示名称（'title'||'label'的意思是，
// key名既可以用title也可以用label，
// title是兼容第三方的@form-create的基础数据结构，
// label兼容yb-form的formItem属性，推荐使用title，以下类同）
['title' || 'label']: '',
// 字段名
['field' || 'prop']: '',
// 验证规则
['validate' || 'rules']: [
{
required: true,
message: '必填',
trigger: 'blur',
},
],
// 栅格布局属性
['col' || 'spans']: { xl: 4, lg: 6, md: 8, sm: 12, xs: 24 },
// 悬浮信息
['info' || 'tooltip']: '',
// 控件下显示提示信息
['contentInfo' || 'contentTip']: '',
// 控件的默认值
['value' || 'defaultValue']: '',
// radio、select、checkbox等有选项组件的选项配置
options: [{ label: '名称', value: '值' }],
// el-form-item 的其他属性
wrap: {},
// 组件的属性，比如el-input组件的其他属性
props: {},
// 组件的事件
on: {},
// 被控制的，
controlled: {
// 被控制是否渲染，当前控件是否渲染，取决于如何 return true/false
rendered: function ({ formItem, formModel }) {},
// 被控制是否显示（控件是渲染的，但可能隐藏的），当前控件是否显示，取决于如何 return true/false
showed: function ({ formItem, formModel }) {
if (formModel['Keyword'] == 3) {
return false;
}
},
},
// 当type=='rowsForm'时的需要，再加一层配置
formalData: [{}],
// 组件的插槽,比如 el-input 有 append插槽,可以使用render函数，
// 也可以在 yb-formily 内对应 `${field}-append`插槽
children: [
// 作用域用 "scopedSlot", 普通插槽用 "slot", el-input 的 append、prepend是普通插槽，这里用"slot"
{ slot: 'append' },
{
slot: 'prepend',
render(h, { config, formItem, formModel }) {
return h('i');
},
},
{
scopedSlot: 'option',
// 如果是 "scopedSlot" ， 会把原组件的参数放进 scopedData 传出来
render(h, { config, formItem, formModel, scopedData }) {
return h('i');
},
},
],
},
];
/**
* 折叠表单
* 注：作为折叠项，是没有type属性的
*/
const formalData = [
{
// 折叠项名称
title: '表单组',
// 折叠项的唯一key
name: '',
// 在这个折叠项内的表单配置，与非折叠表单一致
formalData: [{}],
},
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# yb-formily 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| formalData | 渲染数据，内部属性不是双向绑定的 | object[] | - | [] |
| value/v-model | 表单的值，内部属性是双向绑定的 | object | - | {} |
| showSubmitButton | 是否显示默认的提交按钮 | boolean | - | true |
| showResetButton | 是否显示默认的重置按钮 | boolean | - | true |
| resetFormModel | 是否在 formalData 数组变化时，重置 v-model 内的字段，formalData 存在的字段才会放进 v-model | boolean | - | false |
| submitColumnFormItem | 提交按钮的 formItem 的扩展对象 | object | - | - |
| useButtonsAffix | 内置的提交按钮区域是否固定在滚动元素底部 | boolean | - | true |
| ... | 其他属性来源于 yb-form 和 yb-collapse-form | - | - | - |
# yb-formily 事件
| 参数 | 说明 | 回调参数 |
|---|---|---|
| submit | 表单验证完成后的 submit 事件，表单内存在 native-type="submit"的 button 都可以触发 | value |
| error | submit 时表单验证失败的事件 | err, errFields |
| change | value 改变时触发，凡是有支持 change 事件的单个控件的值改变时也会触发，第二个参数对象只有单个控件值改变时才会有 | value, { config,formItem,formModel,parentFieldName,formItemValue } |
上次更新: 2025/04/07, 10:08:49