We're sorry but f-render doesn't work properly without JavaScript enabled. Please enable it to continue.
FRender 表单设计器
切换视图
vue-ele-form
Docs
GitHub
input
单行输入框
textarea
多行输入框
select
选择器
number
数字
checkbox
复选
radio
单选
switch
开关
date
日期
daterange
日期范围
datetime
时间和日期
datetimerange
日期和时间范围
time
时间
time-picker
时间Picker
timerange
时间范围
dates
多日期
week
周
month
月
monthrange
月范围
year
年
color
颜色选择器
cascader
级联选择器
transfer
穿梭框
cascader-panel
级联面板
password
密码框
yesno
是否
slider
滑块
radio-button
单选按钮
checkbox-button
复选按钮
autocomplete
带建议的输入框
rate
评分组件
image
图片展示
tag
标签
text
静态文本
button
按钮
预览
更改数据
生成代码
批量添加
清空表单
保存数据
预览
数据编辑
代码
批量添加表单项
从左侧拖拽来添加表单项
提交
返回
表单项属性配置
组件属性配置
表单配置
从左侧拖拽添加表单项并点选
从左侧拖拽添加表单项并点选
点击查看 表单配置
属性详细解释
inline: inline模式 / layout模式
layout模式
inline模式
isResponsive: 是否响应式
是
否
labelPosition: 标签位置
响应式
left
right
top
span: 表单宽度
响应式
24 / 24
23 / 24
22 / 24
21 / 24
20 / 24
19 / 24
18 / 24
17 / 24
16 / 24
15 / 24
14 / 24
13 / 24
12 / 24
11 / 24
10 / 24
9 / 24
8 / 24
7 / 24
6 / 24
5 / 24
4 / 24
3 / 24
2 / 24
1 / 24
rules: 校检规则
校检规则文档, 请
点击查看
isDialog: 是否为弹窗
非弹窗
弹窗
isShowLabel: 是否显示标签
显示
不显示
labelWidth: 标签宽度
默认值为
auto
disabled: 全局禁用表单
正常
禁用
readonly: 全局只读表单
正常
只读
isShowErrorNotify: 是否在校检错误后显示右上角提示
显示
不显示
isShowSubmitBtn: 提交按钮
显示
隐藏
isShowBackBtn: 返回按钮
显示
隐藏
formBtnSize: 表单按钮大小
默认
medium
small
mini
isShowResetBtn: 重置按钮
显示
隐藏
isShowCancelBtn: 取消按钮
显示
隐藏
submitBtnText: 提交按钮文字
backBtnText: 返回按钮文字
cancelBtnText: 取消按钮文字
resetBtnText: 返回按钮文字
formAttrs: el-form属性