表单
表单(Form)用于配置数据录入和展示界面,通过可视化设计器将实体对象的字段以特定的布局和样式呈现给用户。
概述
表单是业务系统中最常见的用户界面之一。Chameleon 平台提供了强大的表单设计器,支持拖拽式设计、多种布局方式、字段联动和数据验证。
表单的核心价值
- 所见即所得:设计器实时预览表单效果
- 灵活配置:无需编码即可实现复杂表单
- 数据校验:自动生成前端验证规则
- 响应式布局:自适应不同屏幕尺寸
表单呈现形式
弹窗态
功能按钮点击弹出,一般用于新增或编辑数据。适用于快速数据录入和简单交互场景。
表单页
作为单独页面展示,适用于字段较多、需要分步填写或复杂交互的场景。
详情页
只读展示记录详情,适用 于审批查看、数据预览等场景。
表单模式
| 模式 | 说明 | 特点 |
|---|---|---|
| 新建模式 | 创建新记录 | 显示默认值,必填验证生效 |
| 编辑模式 | 修改已有记录 | 显示当前值,支持变更追踪 |
| 查看模式 | 只读展示详情 | 所有字段不可编辑 |
表单结构概览
一个表单主要由以下部分构成:
- 布局组件:栅格布局、分组容器、标签页等
- 字段组件:基础字段、关联字段、特殊字段
- 操作按钮:提交、取消、自定义按钮
布局组件
| 组件 | 说明 | 适用场景 |
|---|---|---|
| 栅格布局 | 支持 1-4 列响应式布局 | 常规表单、详细信息页面 |
| 分组容器 | 将相关字段分组,支持折叠/展开 | 字段分类展示 |
| 标签页 | 将字段分布在多个标签页中 | 字段较多的表单 |
表单项类型
| 类型 | 说明 |
|---|---|
| 字段项 | 绑定实体字段的输入控件 |
| 布局项 | 用于组织表单布局的容器 |
| 静态项 | 纯展示元素,如文本、图片 |
| 按钮项 | 自定义操作按钮 |
高级特性
字段联动
支持字段间的值联动、显隐联动、选项联动,可通过表单脚本 API 实现复杂逻辑。
自定义提交逻辑
支持通过自定义接口扩展新增、编辑、详情查询的默认行为。
提交后动作
配置表单提交后的渲染方式,如跳转页面、跳转结果页等。
详细配置指南
表单的完整配置说明请参阅:
最佳实践
布局设计
- 合理分组,相关字段放在一起
- 重要字段放在显眼位置
- 避免单屏字段过多,使用标签页或分组
字段配置
- 设置合理的默认值,减少用户输入
- 使用占位符提示输入格式
- 必填字段要有明确标识