-
基于element-ui封装可配置表单组件
“vue”: “^2.7.13”
“element-ui”: “^2.15.7”【说明】
该组件时使用vue3（vue2.7）语法封装，使用时可用vue2语法使用也可以使用vue3语法使用一、vue2语法使用案例
基础用法
<template> <div class="form-demo"> <div class="form"> <BasicForm :schemas="schemas" :colProps="{span: 12}" :showActionButtonGroup="false" @register="register" @change="handleChange" /> div> <div class="btns"> <el-button type="primary" @click="saveForm">保存el-button> <el-button @click="resetForm">重置el-button> div> div> template> <script> export default { name: 'BasicFormDemo', data() { return { schemas: [ { prop: 'id', component: 'Input', show: false // 显示隐藏 }, { prop: 'username', component: 'Input', label: '姓名', labelWidth: '100px', defaultValue: '张三', // 默认值 colProps: { span: 8 }, required: true }, { prop: 'address', component: 'Input', label: '地址', labelWidth: '100px', defaultValue: 1, // 默认值 componentProps: { maxlength: 10, showWordLimit: true }, colProps: { span: 8 } }, { prop: 'rate', component: 'Input', label: '税率', labelWidth: '100px', componentProps: { append: '%' }, colProps: { span: 8 } }, { prop: 'url', component: 'Input', label: '网址', labelWidth: '100px', componentProps: { prepend: 'http' }, colProps: { span: 8 } }, { prop: 'inputNumber', component: 'InputNumber', label: '距离', labelWidth: '100px', defaultValue: 1 // 默认值 }, { prop: 'age', component: 'Switch', label: '年龄', labelWidth: '100px', defaultValue: true // 默认值 }, { prop: 'remark', component: 'Input', label: '评论', labelWidth: '100px', componentProps: { type: 'textarea', placeholder: '请输入评论' } }, { prop: 'divider', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '日期类型组件' } }, { prop: 'time1', component: 'TimePicker', label: '时间选择器' }, { prop: 'time2', component: 'TimePicker', label: '时间选择器', componentProps: { isRange: true, rangeSeparator: '至', startPlaceholder: '开始时间', endPlaceholder: '结束时间', placeholder: '选择时间范围' } }, { prop: 'createDate', component: 'DatePicker', label: '创建日期', componentProps: {} }, { prop: 'endDate', component: 'DatePicker', label: '带快捷选项', componentProps: { valueFormat: 'yyyy-MM-dd', pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() }, shortcuts: [ { text: '今天', onClick(picker) { picker.$emit('pick', new Date()) } }, { text: '昨天', onClick(picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24) picker.$emit('pick', date) } }, { text: '一周前', onClick(picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', date) } } ] } } }, { prop: 'weekly', component: 'DatePicker', label: '周', componentProps: { type: 'week', format: 'yyyy 第 WW 周', placeholder: '请选择周' } }, { prop: 'dateRange', component: 'DatePicker', label: '日期范围', componentProps: { type: 'daterange', rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期' } }, { prop: 'dateRange1', component: 'DatePicker', label: '日期范围-带快捷选项', labelWidth: '140px', componentProps: { type: 'daterange', align: 'right', unlinkPanels: true, rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期', pickerOptions: { shortcuts: [ { text: '最近一周', onClick(picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', [start, end]) } }, { text: '最近一个月', onClick(picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) picker.$emit('pick', [start, end]) } }, { text: '最近三个月', onClick(picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) picker.$emit('pick', [start, end]) } } ] } } }, { prop: 'monthRange', component: 'DatePicker', label: '月份范围', componentProps: { type: 'monthrange', rangeSeparator: '至', startPlaceholder: '开始月份', endPlaceholder: '结束月份' } }, { prop: 'monthRange1', component: 'DatePicker', label: '月份范围-带选项', labelWidth: '130px', componentProps: { type: 'monthrange', align: 'right', unlinkPanels: true, rangeSeparator: '至', startPlaceholder: '开始月份', endPlaceholder: '结束月份', pickerOptions: { shortcuts: [ { text: '本月', onClick(picker) { picker.$emit('pick', [new Date(), new Date()]) } }, { text: '今年至今', onClick(picker) { const end = new Date() const start = new Date(new Date().getFullYear(), 0) picker.$emit('pick', [start, end]) } }, { text: '最近六个月', onClick(picker) { const end = new Date() const start = new Date() start.setMonth(start.getMonth() - 6) picker.$emit('pick', [start, end]) } } ] } } }, { prop: 'DateTimePicker', component: 'DatePicker', label: '日期时间选择器', labelWidth: '110px', componentProps: { type: 'datetime' } }, { prop: 'divider', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '单选框' } }, { prop: 'radio', component: 'RadioGroup', label: '单选框', defaultValue: '2', colProps: { span: 12 }, componentProps: { options: [ { label: '1', value: '选项1' }, { label: '2', value: '选项2' }, { label: '3', value: '选项3', border: true }, { label: '4', value: '选项4', disabled: true } ] } }, { prop: 'divider', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '复选框' } }, { prop: 'checkbox', component: 'CheckboxGroup', label: '复选框', defaultValue: ['2'], colProps: { span: 12 }, componentProps: { options: [ { label: '1', value: '选项1' }, { label: '2', value: '选项2' }, { label: '3', value: '选项3', border: true }, { label: '4', value: '选项4', disabled: true } ] } }, { prop: 'selectAll', component: 'SelectAll', label: '全选', colProps: { span: 12 }, defaultValue: ['2'], componentProps: { options: [ { label: '1', value: '选项1' }, { label: '2', value: '选项2' } ] } }, { prop: 'divider', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '下拉框' } }, { prop: 'select', component: 'Select', label: '下拉框', defaultValue: '2', componentProps: { options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2', disabled: true } ] } }, { prop: 'select1', component: 'Select', label: '多选', componentProps: { multiple: true, placeholder: '请选择', options: [ { unitName: '选项1', id: '1' }, { unitName: '选项2', id: '2', disabled: true } ], fieldNames: { label: 'unitName', value: 'id' } } }, { prop: 'select11', component: 'ApiSelect', label: '远程下拉框', componentProps: { api: () => this.getOpt(), resultField: 'result', fieldNames: { label: 'unitName', value: 'id' } } }, { prop: 'ApiTreeSelect', component: 'ApiTreeSelect', label: '树下拉框', componentProps: { api: () => this.getTreeData(), resultField: 'result', fieldNames: { label: 'name' } } }, { prop: 'divider1', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '级联选择器' } }, { prop: 'Cascader', component: 'Cascader', label: '基本用法', componentProps: { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' } ] }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' } ] } ] }, { value: 'zujian', label: '组件', children: [ { value: 'basic', label: 'Basic', children: [ { value: 'layout', label: 'Layout 布局' }, { value: 'color', label: 'Color 色彩' }, { value: 'typography', label: 'Typography 字体' }, { value: 'icon', label: 'Icon 图标' }, { value: 'button', label: 'Button 按钮' } ] }, { value: 'form', label: 'Form', children: [ { value: 'radio', label: 'Radio 单选框' }, { value: 'checkbox', label: 'Checkbox 多选框' }, { value: 'input', label: 'Input 输入框' }, { value: 'input-number', label: 'InputNumber 计数器' }, { value: 'select', label: 'Select 选择器' }, { value: 'cascader', label: 'Cascader 级联选择器' }, { value: 'switch', label: 'Switch 开关' }, { value: 'slider', label: 'Slider 滑块' }, { value: 'time-picker', label: 'TimePicker 时间选择器' }, { value: 'date-picker', label: 'DatePicker 日期选择器' }, { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' }, { value: 'upload', label: 'Upload 上传' }, { value: 'rate', label: 'Rate 评分' }, { value: 'form', label: 'Form 表单' } ] }, { value: 'data', label: 'Data', children: [ { value: 'table', label: 'Table 表格' }, { value: 'tag', label: 'Tag 标签' }, { value: 'progress', label: 'Progress 进度条' }, { value: 'tree', label: 'Tree 树形控件' }, { value: 'pagination', label: 'Pagination 分页' }, { value: 'badge', label: 'Badge 标记' } ] }, { value: 'notice', label: 'Notice', children: [ { value: 'alert', label: 'Alert 警告' }, { value: 'loading', label: 'Loading 加载' }, { value: 'message', label: 'Message 消息提示' }, { value: 'message-box', label: 'MessageBox 弹框' }, { value: 'notification', label: 'Notification 通知' } ] }, { value: 'navigation', label: 'Navigation', children: [ { value: 'menu', label: 'NavMenu 导航菜单' }, { value: 'tabs', label: 'Tabs 标签页' }, { value: 'breadcrumb', label: 'Breadcrumb 面包屑' }, { value: 'dropdown', label: 'Dropdown 下拉菜单' }, { value: 'steps', label: 'Steps 步骤条' } ] }, { value: 'others', label: 'Others', children: [ { value: 'dialog', label: 'Dialog 对话框' }, { value: 'tooltip', label: 'Tooltip 文字提示' }, { value: 'popover', label: 'Popover 弹出框' }, { value: 'card', label: 'Card 卡片' }, { value: 'carousel', label: 'Carousel 走马灯' }, { value: 'collapse', label: 'Collapse 折叠面板' } ] } ] }, { value: 'ziyuan', label: '资源', children: [ { value: 'axure', label: 'Axure Components' }, { value: 'sketch', label: 'Sketch Templates' }, { value: 'jiaohu', label: '组件交互文档' } ] } ] } }, { prop: 'Cascader2', component: 'Cascader', label: '多选', componentProps: { props: { multiple: true }, options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' } ] }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' } ] } ] }, { value: 'zujian', label: '组件', children: [ { value: 'basic', label: 'Basic', children: [ { value: 'layout', label: 'Layout 布局' }, { value: 'color', label: 'Color 色彩' }, { value: 'typography', label: 'Typography 字体' }, { value: 'icon', label: 'Icon 图标' }, { value: 'button', label: 'Button 按钮' } ] }, { value: 'form', label: 'Form', children: [ { value: 'radio', label: 'Radio 单选框' }, { value: 'checkbox', label: 'Checkbox 多选框' }, { value: 'input', label: 'Input 输入框' }, { value: 'input-number', label: 'InputNumber 计数器' }, { value: 'select', label: 'Select 选择器' }, { value: 'cascader', label: 'Cascader 级联选择器' }, { value: 'switch', label: 'Switch 开关' }, { value: 'slider', label: 'Slider 滑块' }, { value: 'time-picker', label: 'TimePicker 时间选择器' }, { value: 'date-picker', label: 'DatePicker 日期选择器' }, { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' }, { value: 'upload', label: 'Upload 上传' }, { value: 'rate', label: 'Rate 评分' }, { value: 'form', label: 'Form 表单' } ] }, { value: 'data', label: 'Data', children: [ { value: 'table', label: 'Table 表格' }, { value: 'tag', label: 'Tag 标签' }, { value: 'progress', label: 'Progress 进度条' }, { value: 'tree', label: 'Tree 树形控件' }, { value: 'pagination', label: 'Pagination 分页' }, { value: 'badge', label: 'Badge 标记' } ] }, { value: 'notice', label: 'Notice', children: [ { value: 'alert', label: 'Alert 警告' }, { value: 'loading', label: 'Loading 加载' }, { value: 'message', label: 'Message 消息提示' }, { value: 'message-box', label: 'MessageBox 弹框' }, { value: 'notification', label: 'Notification 通知' } ] }, { value: 'navigation', label: 'Navigation', children: [ { value: 'menu', label: 'NavMenu 导航菜单' }, { value: 'tabs', label: 'Tabs 标签页' }, { value: 'breadcrumb', label: 'Breadcrumb 面包屑' }, { value: 'dropdown', label: 'Dropdown 下拉菜单' }, { value: 'steps', label: 'Steps 步骤条' } ] }, { value: 'others', label: 'Others', children: [ { value: 'dialog', label: 'Dialog 对话框' }, { value: 'tooltip', label: 'Tooltip 文字提示' }, { value: 'popover', label: 'Popover 弹出框' }, { value: 'card', label: 'Card 卡片' }, { value: 'carousel', label: 'Carousel 走马灯' }, { value: 'collapse', label: 'Collapse 折叠面板' } ] } ] }, { value: 'ziyuan', label: '资源', children: [ { value: 'axure', label: 'Axure Components' }, { value: 'sketch', label: 'Sketch Templates' }, { value: 'jiaohu', label: '组件交互文档' } ] } ] } }, { prop: 'field3', component: 'Cascader', label: '可搜索', componentProps: { filterable: true, props: { label: 'unitName', value: 'id' }, options: [ { unitName: '神印王座', id: 1, children: [ { unitName: '龙皓晨', id: 11 }, { unitName: '圣彩儿', id: 12 } ] }, { unitName: '吞噬星空', id: 2 }, { unitName: '天行九歌', id: 3 } ] } }, { prop: 'field3', component: 'ApiCascader', label: 'ApiCascader', componentProps: { filterable: true, props: { label: 'unitName', value: 'id' }, api: () => this.getCascaderOpt() } }, { prop: 'field4', component: 'Divider', labelWidth: '0px', componentProps: { contentPosition: 'left', content: '上传' } }, { prop: 'field4', component: 'Upload', label: '上传附件', componentProps: { action: 'https://httpbin.org/post' } } ], formAction: {} } }, methods: { register(e) { this.formAction = e console.log('e', e) }, handleChange(e) { console.log('handleChange', e) }, saveForm() { this.formAction.validate() console.log('t', this.formAction.getFieldValues()) }, resetForm() { this.formAction.clearValidate() }, getOpt() { return new Promise(resolve => { const result = { result: [ { id: '选项1', unitName: '黄金糕' }, { id: '选项2', unitName: '双皮奶' }, { id: '选项3', unitName: '蚵仔煎' }, { id: '选项4', unitName: '龙须面' }, { id: '选项5', unitName: '北京烤鸭' }, { id: '选项6', unitName: '冰激淋' }, { id: '7', unitName: '榴莲千层' }, { id: '8', unitName: '煎饼' }, { id: '9', unitName: '手抓饼' } ] } resolve(result) }) }, getTreeData() { return Promise.resolve([ { id: 118808, parentId: null, name: '新疆', children: [ { id: 118809, parentId: 118808, name: '巴州乐禾', children: [ { id: 118817, parentId: 118809, name: '采购部' }, { id: 118818, parentId: 118809, name: '销售部' }, { id: 118824, parentId: 118809, name: '运营部' }, { id: 111824, parentId: 113809, name: '研发部' }, { id: 118814, parentId: 118829, name: '市场部' } ] } ] }, { id: 118809, parentId: null, name: '广东', children: [ { id: 118879, parentId: 118801, name: '广州' } ] } ]) }, getCascaderOpt() { return Promise.resolve([ { unitName: '神印王座', id: 1, children: [ { unitName: '龙皓晨', id: 11 }, { unitName: '圣彩儿', id: 12 } ] }, { unitName: '吞噬星空', id: 2 }, { unitName: '天行九歌', id: 3 } ]) } } } script> <style lang="scss"> .form-demo { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; .form { flex: 1; overflow: hidden; } .btns { display: flex; align-items: center; justify-content: flex-end; padding: 16px; box-shadow: 0 -1px #ddd; } } style>- 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
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
可折叠表单
<template> <div class="form-demo"> <div class="form"> <BasicForm :schemas="schemas" :colProps="{span: 12}" @register="register" @change="handleChange" /> div> div> template> <script> export default { name: 'BasicFormDemo', data() { return { schemas: [ { prop: 'username', component: 'Input', label: '姓名' }, { prop: 'address', component: 'Input', label: '地址' }, { prop: 'rate', component: 'Input', label: '税率', componentProps: { append: '%' } } ], formAction: {} } }, methods: { register(e) { this.formAction = e console.log('formAction', e) }, handleChange(e) { console.log('handleChange', e) } } } script> <style lang="scss"> .form-demo { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; .form { flex: 1; overflow: hidden; } .btns { display: flex; align-items: center; justify-content: flex-end; padding: 16px; box-shadow: 0 -1px #ddd; } } style>- 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
设置表单表项值
<template> <div class="form-demo"> <div class="form"> <BasicForm :schemas="schemas" :colProps="{span: 12}" :showActionButtonGroup="false" @register="register" @change="handleChange" /> div> <div class="btns"> <el-button type="primary" @click="setFormData">设置值el-button> <el-button type="primary" @click="updateSchema"> 更新表单项配置项 el-button> <el-button type="primary" @click="insetSchema"> 插入表单项 el-button> <el-button type="primary" @click="removeSchemaByFiled"> 删除表单项 el-button> <el-button type="primary" @click="resetSchemas"> 重置表单 el-button> div> div> template> <script> export default { name: 'BasicFormDemo', data() { return { schemas: [ { prop: 'username', component: 'Input', label: '姓名' }, { prop: 'address', component: 'Input', label: '地址' }, { prop: 'rate', component: 'Input', label: '税率', componentProps: { append: '%' } } ], formAction: {} } }, methods: { register(e) { this.formAction = e console.log('formAction', e) }, handleChange(e) { console.log('handleChange', e) }, setFormData() { // 调用 setFieldValues 方法可设置表单项值, 返回值是更新之后表单的值 const data = this.formAction.setFieldValues({ username: '李四' }) console.log('data', data) }, updateSchema() { this.formAction.updateSchema({ prop: 'rate', component: 'Input', label: '税率', componentProps: { placeholder: '请输入税率' } }) }, insetSchema() { this.formAction.insetSchema('rate', { prop: 'rate1', component: 'Input', label: '新增', componentProps: { placeholder: '请输入' } }) }, removeSchemaByFiled() { this.formAction.removeSchemaByFiled('address') }, resetSchemas() { this.formAction.resetSchemas() } } } script> <style lang="scss"> .form-demo { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; .form { flex: 1; overflow: hidden; } .btns { display: flex; align-items: center; justify-content: flex-end; padding: 16px; box-shadow: 0 -1px #ddd; } } style>- 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
使用插槽 slots
<template> <div class="form-demo"> <div class="form"> <BasicForm :schemas="schemas" :colProps="{span: 24}"> <template #username> <span>username slotspan> template> <template #submitBefore> submit 左侧插槽 template> BasicForm> div> div> template> <script> export default { name: 'BasicFormDemo', data() { return { schemas: [ { prop: 'username', component: 'Input', label: '姓名', slots: 'username' }, { prop: 'address', component: 'Input', label: '地址' }, { prop: 'rate', component: 'Input', label: '税率', componentProps: { append: '%' } } ] } } } script> <style lang="scss"> .form-demo { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; .form { flex: 1; overflow: hidden; } .btns { display: flex; align-items: center; justify-content: flex-end; padding: 16px; box-shadow: 0 -1px #ddd; } } style>- 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
二、vue3语法使用
- 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
Form Attributes
参数 说明 类型 可选值 默认值 colon label 是否显示冒号 boolean — 显示 schemas 必填，表单配置项，具体 看下表 array — — colProps 表单项栅格布局，具体看下表 objeact — — labelWidth label 宽度 string — ‘100px’ labelPosition 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width string — right showActionButtonGroup 是否显示操作按钮 boolean — true showSearchBtn 是否显示查询按钮 boolean — true showResetBtn 是否显示清空按钮 Boolean — true searchText 查询按钮文本 string — ‘查询’ resetText 清空按钮文本 string — 清空 isFlex 是否开启自适应布局 boolean — true formSize 尺寸，不同的lebel设置不同的尺寸以适应屏幕, 设置此属性必须设置isFlex为true boolean — true model 表单数据对象 object — — isEnterSearch 是否按下回车查询 boolean — true formItemMb 表单项的 margin-bottom String — ‘16px’ Schemas Attributes
参数 说明 类型 可选值 默认值 colon label 是否显示冒号 boolean —— true prop 必填，字段名称, 唯一string —— —— component 必填，输入框类型, string Input、InputNumber 、TimePicker、DatePicker、Switch、RadioGroup、CheckboxGroup、SelectAll、Select、ApiSelect、ApiTreeSelect、Cascader、ApiCascader、Upload、Divider —— label 标签文本 string —— —— label-width 表单域标签的的宽度 string —— ’100px‘ required 是否必填 boolean —— false show 表单项显示隐藏 boolean —— false componentProps 可设置组件属性（element 组件的属性，具体可查看 element 组件文档），如禁用输入框 componentProps={disabled: true}object —— {} defaultValue 输入框默认值 any —— —— colProps 表单项栅格布局，具体看下表 object —— —— rules 表单验证规则 array —— —— disabled 是否禁用, 如此处设置表单禁用，无需在 componentProps 中设置 false —— —— slots 表单项插槽 string —— —— renderContent 渲染内容, 需要返回渲染函数，否则会报错 Function —— —— formItemMb 表单项的 margin-bottom String —— ‘16px’ colProps Attributes
参数 说明 类型 可选值 默认值 span 栅格占据的列数 number —— 8 xs <768px响应式栅格数或者栅格属性对象number —— —— sm ≥768px响应式栅格数或者栅格属性对象number —— —— md ≥992px响应式栅格数或者栅格属性对象number —— —— lg ≥1200px响应式栅格数或者栅格属性对象number —— —— xl ≥1920px响应式栅格数或者栅格属性对象number —— —— Events
事件名称 说明 回调参数 change 值改变时触发，InputNumber 类型输入如果设置默认值, 初始时会触发一次 change 事件 e: any register 注册 BasicForm 组件实例, 获取实例上的方法 e: object Slots
name 说明 submitBefore submit btn 左侧插槽 resetBefore reset btn 左侧插槽 resetAfter reset btn 右侧插槽 moreAfter 更多 右侧插槽 Methods
⚠️ 该组件二次封装后需注册
register事件, 获取实例方法, 并且需要保存到当前组件实例中方法名 说明 参数 validate 校验 — clearValidate 清空表单校验 — reset 清空表单校验, 清空输入框值 — getFieldValues 获取表单的值 — setFieldValues 设置表单的值, 返回值是更新之后表单的值 object updateSchema 更新表单配置项, prop 必须存在 schemas 中, 不存在则更新失败 — insetSchema 插入表单项 field, schema removeSchemaByFiled 删除表单项 field resetSchemas 重置配置项, 恢复初始值 — -
相关阅读:
c++ - 模板(一)
【零基础学Python】Day8 Python基本数据类型之Dictionary
阿里云张新涛：支持沉浸式体验应用快速落地，阿里云云XR平台发布
python--列表list切分（超详细）
关于第一届全球电子纸创新应用金奖征集评选及报名指南
[附源码]计算机毕业设计JAVAjsp校外教育机构类网站
ChromeDriver全版本下载教程
iNeuOS工业互联网操作系统，三维（3D）模型在线编辑应用和实时数据统计（和值、均值、众数、方差、中位数等）
【计算机网络】 RTT和RTO
学长教你学C-day8-C语言算数运算和逻辑运算
- 原文地址：https://blog.csdn.net/weixin_47085255/article/details/134268490
