在线表单设计器
安装
npm install design-form-maker --save
引用
import DesignFormMaker from 'design-form-maker'
import 'design-form-maker/lib/design-form-lib.css'
...
Vue.use(DesignFormMaker, options)
...
options
| 配置项 | 备注 | 默认值 |
|---|---|---|
| onlineFormList | 在线表单预览功能路由的name值，用于在线表单测试功能的菜单按钮跳转 | onlineFormList |
| onlineFormListPath | 在线表单功能配置的路径(结合本项目配置的路由) | /online/formList |
| onlineFormTreeListPath | 在线表单树功能配置的路径(结合本项目配置的路由) | /online/formTreeList |
| ajax | axios配置对象 | {} |
ajax
传入 axios 对象 ...
组件
| 名字 | 备注 |
|---|---|
| OnlineFom | 在线表单配置列表组件 |
| OnlineFormList | 在线表单功能组件 |
| GenForm | 表单渲染组件 |
| DictFormList | 字段表管理组件 |
组件参数
- OnlineFormList
props
| 名字 | 备注 | 类型 |
|---|---|---|
| id | 表单配置id | Number, String |
| dbId ｜ 数据源id | Number, String |
- GenForm
props
| 名字 | 备注 | 类型 |
|---|---|---|
| headId | 表单配置id | Number, String |
| editData | 编辑数据 | Object |
组件提供方法
| 名字 | 备注 |
|---|---|
| reset | 重置表单数据 |
| getData | 获取表单数据 返回Promise |
| setDisabled(boolean) | 设置表单是否可以编辑 true: 不可编辑, false 可以编辑 |