Form 表单
表单组件继承自 ElForm 组件，基础用法请参考 Element Plus 官方文档。
在原有表单基础上增加了以下功能：
- 表单项定义可以由数据定义，此时数据将自动双向绑定
- 表单验证得到增强，参考 Validate 数据验证
- 集成了自定义表单组件，更方便使用
- 表单会自动根据设备宽度动态调整布局
- 表单数据在加载时自带骨架屏
- 所有附件上传服务器的逻辑调整至表单提交且表单验证通过后统一上传
基础用法
render 自定义渲染项
slots 定义插槽
loading 加载中
表单数据未加载完成前，展示骨架屏
slotName 声明插槽
slotName 属性声明插槽 name，这样可以通过具名插槽来完全定制表单项
jsx 风格绑定事件
在模板中我们一般使用 @事件名 来绑定事件， 表单组件基于 jsx 动态实现，所以绑定事件应调整为 on事件名 的函数名来绑定事件， 如 onChange
colspan 定制跨列规则
form的 colspan 属性定义表单的col跨度，采用24分隔法，表单项的 colspan 属性用户覆盖form配置，cols表示跨表单项数，通过组合使用灵活实现跨列需求
comment 备注信息
满足对表单项有特殊说明的需求，支持 VNode 定义备注内容
Native 特殊表单项类型
有时候，有些表单项可能只是要展示一些内容而已，用插槽自定义来实现又比较麻烦，所以增加此类型方便使用
Form API
Form 属性
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| handleType | 表单处理类型 | add | edit | detail | string | 'add' |
| colspan | el-col默认跨度 | number | — |
| model | 表单数据对象 | object | 必填 |
| columns | 表单项定义 CommonFormColumn | Array | — |
| labelWidth | 表单标题宽度 | string | number | — |
| loading | 加载状态，为true时展示骨架屏 | boolean | — |
Form Slots
| 插槽名 | 详情 | 类型 |
|---|---|---|
string | 通过slotName 动态指定插槽名 | — |
Form Exposes
| 方法名 | 详情 | 类型 |
|---|---|---|
| submit | 提交表单，验证并上传附件 | Function |
CommonFormColumn 表单项
| 字段 | 字段描述 | 类型 |
|---|---|---|
| label | 标题名称 | string |
| type | 表单类型，参考下方表单类型对照表 | string |
| hidden | 隐藏此列 | boolean |
| prop | 绑定表单的属性 | string |
| prop2 | 表单属性2 ，'daterange', 'datetimerange', 'monthrange' 可能会使用 | string |
| rules | 验证规则，参考 Validate 数据验证 | ValidRules |
| render | 自定义渲染，参数为默认渲染的vNode | Function |
| comment | 疑问备注 | string | VNode |
| required | 显示必填星号 | boolean |
| slots | 表单项插槽 | SlotsObj |
| slotName | 允许用户按照自己的slotName插槽定制 | string |
| optionParam | 定制 'radio-group' 和 'checkbox-group' 的选项参数 | object |
| itemList | type = 'select' | 'radio-group' | 'checkbox-group' 时的枚举选项 | CommonItemList |
| labelKey | 枚举选项的 labelKey，默认为 label | string |
| valueKey | 枚举选项的 valueKey，默认为 value | string |
Form Type 对照表
| type值 | 对应组件 | 说明 |
|---|---|---|
'text' | 'textarea' | 'password' | 'number' | undefined | ElInput | |
'year' | 'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | ElDatePiker | |
'autocomplete' | ElAutocomplete | |
'cascader' | ElCascader | |
'checkbox' | ElCheckbox | |
'checkbox-button' | ElCheckboxButton | |
'color-picker' | ElColorPicker | |
'input-number' | ElInputNumber | |
'radio' | ElRadio | |
'radio-button' | ElRadioButton | |
'rate' | ElRate | |
'select' | ElSelect | |
'select-v2' | ElSelectV2 | |
'slider' | ElSlider | |
'switch' | ElSwitch | |
'time-picker' | ElTimePicker | |
'time-select' | ElTimeSelect | |
'upload' | ElUpload | |
'radio-group' | ElRadioGroup | |
'checkbox-group' | ElCheckboxGroup | |
'icon-select' | MIconSelect | |
'upload-img' | 'upload-file' | MUpload | |
'span'| 'div'| 'p'| 'a'| 'i' | MNative | 表单的值将作为这些原生标签的 innerHtml 插入展示 |
'blank' | MNative | 将此表单项将显示为空 |
皖公网安备34180202000574号