We're sorry but way-el-form doesn't work properly without JavaScript enabled. Please enable it to continue.
way-el-form
基于 elementUI 封装的 JSON To Form 表单组件,支持 Search 和 Form 两种模式
查询模式
查询模式用户table的表头查询,或者页面的查询
姓名
工种
1
2
3
查询
重置
查询模式-单项反馈
如果不希望错误的选项框标红可以通过css修改覆盖,这里提供了一个简单的示例
姓名
工种
1
2
3
查询
重置
表单模式
通用表单模式,常用于业务表单
行内换行模式
隐藏标签
隐藏标签时默认标签位置为顶部
禁用
隐藏必填标记
标签位置
左
右
上
spin
展示底部
隐藏之后可以通过自定义操作按钮通过ref手动调用方法
inlineBlock
该属性用于定义行内换行模式。如果设置为 true,则表单控件会在同一行中显示,并根据内容自动换行。如果设置为 false,则表单控件会分行显示。
动态修改工种数据源
静态数据可以通过更改form数据来完成,如果是使用source配置的请求方法,可以通过 this.$refs.queryForm.updateSources('key')来重新获取
修改数据源
姓名
年龄
工种
1
2
3
条件显隐字段
复选框
1
2
3
单选框
1
2
3
下拉菜单分组
分组1
1
2
3
分组2
4
5
6
datetime
datetimerange
-
TimePicker
Cascader
暂无数据
Rate
Upload
ColorPicker
清空
确定
Slider
表单模式-分栏
分栏模式下,label最好隐藏或者设置为顶部,否则会出现错位;分栏模式可以自定义表单项的分栏宽度
这是自定义分割标题
姓名
年龄
工种
1
2
3
条件显隐字段
配置异步请求数据
在main.js注册组件时同步配置全局请求方法,配合formItem的source(api/params/handle)属性可以实现异步数据的获取
姓名
年龄
工种
无数据
条件显隐字段