基于element-ui
的el-form
组件进行封装的,加了很多日常使用的属性及方法。主要用于数据的创建、修改、详情窗口显示。
属性
参数 | 说明 | 类型 | 默认值 |
idKey | id值 | string | id |
showLoading | 是否使用加载 | boolean | true |
textMode | 是否启用详情样式,默认是以编辑样式处理 | boolean | false |
showSaveButton | 是否显示保存按钮 | boolean | false |
getGuidOnCreate | 的最大高度,超过后会出现坚向滚动条 | boolean | false |
labelWidth | 表单的字段标签宽度 | string | 85px |
rules | 表单的验证规则 | object | |
labelPosition | 标签对齐位置 | | |
data | 数据对象 | object | |
savedMessage | 保存后提示消息 | string | 保存成功 |
beforeSave | 保存之前,返回true进行保存,返回false不进行保存 | function | |
confirmOnSave | 是否在保存时弹出确认提示 | boolean | false |
confirmSaveText | 保存确认提示文字 | string | 您确定要保存吗? |
saveButtonText | 保存按钮的文本 | | 保存 |
getDataFunc | 获取数据的函数 | function | null |
saveFunc | 保存数据的函数 | function | null |
事件
事件名 | 说明 | 参数 |
created | 当表单被调用create方法打开后,会传入窗口的data数据 | object |
edited | 当窗口被调用edit方法打开后,会传入窗口的data数据 | object |
detailed | 当窗口被调用detail方法打开后,会传入窗口的data数据 | object |
data-got | 当获取详情数据后 | object |
saved | 当数据保存后 | |
方法
方法名 | 说明 | 参数 |
create | 打开创建表单 | object |
edit | 打开编辑表单 | object |
editById | 打开编辑表单,传入id | number |
detail | 打开详情表单 | object |
detailById | 打开详情表单,传入id | number |
loading | 设置窗口加载状态 | boolean |
change | 更改表单数据的变动状态 | boolean |
reset | 重置表单数据 | |
setData | 设置表单数据 | object |
reload | 刷新表单数据 | |
getData | 获取表单数据 | number |
validate | 验证表单字段 | |
save | 保存表单数据,传入true为强制保存 | boolean |
clearValidate | 清空表单验证信息 | |
Slots