Skip to content

表单设计器

表单设计器让你通过拖拽方式设计业务对象的新增和编辑表单。

进入表单设计器

页面管理进入:

  1. 选中一个表单页或列表+表单页,点击「编辑」进入页面设计器
  2. 设计器中的表单区域即表单设计区,支持拖拽字段、配置属性和校验规则
  3. 页面设计器中的字段组件可直接拖入画布,系统自动在绑定的业务对象上创建字段

界面布局

设计器分为三个区域:

区域位置说明
字段面板左侧显示该业务对象的所有字段
画布区域中间表单布局预览,支持拖拽排列
属性面板右侧当前选中字段的属性配置

拖拽字段到画布

  1. 在左侧字段面板中,按住字段不放
  2. 拖动到中间画布区域的目标位置
  3. 释放鼠标,字段自动添加到表单中

未拖入画布的字段不会出现在运行时表单中,但仍会作为数据库列存在。

字段属性配置

选中画布中的字段后,在右侧属性面板配置:

属性说明示例
标签名称字段显示名称客户名称
必填勾选后提交时校验非空
只读运行时不可编辑编辑时显示但不允许修改
默认值新建记录时的初始值待跟进
占位提示输入框 placeholder请输入客户名称
校验规则正则或内置规则手机号格式校验

校验规则

支持以下内置校验:

规则说明
必填值不能为空
最大长度文本类型字段限制字符数
正则校验自定义正则表达式
邮箱格式内置邮箱格式校验
手机号内置手机号格式校验

表单布局调整

  • 调整顺序:在画布中拖拽字段上下移动
  • 分栏布局:一行可放置多个字段,支持 1/2/3 栏布局
  • 分组:添加分隔线或分组标题,将字段按业务逻辑分区

下一步

Forge Admin — 基于 Vue3 + Spring Boot 的企业级后台管理框架