跳到主要内容

表单容器

表单容器是一种高性能的表单控件，具备数据域管理能力，集成了数据绑定、数据校验和样式控制等功能。

一、何时使用​

  • 需要收集结构化信息，如用户资料、订单信息等
  • 单页内仅使用一个主表单时
  • 表单项需要绑定后端接口，并支持自动生成字段
  • 需要统一管理表单项校验、样式、状态等

二、属性配置​

1. 数据源​

数据源配置

表单容器支持通过接口绑定来管理数据的创建、更新和初始化。

1.1 创建数据​

用于创建新实体数据，绑定后端创建 API。

  • 系统将自动识别 API 中字段，自动生成表单项（字段名与标签）
  • 表单项在界面中会自动同步为对应的输入控件

示例：

创建数据

1.2 更新数据​

用于对现有数据进行编辑提交，绑定后端更新 API。

  • 同样支持字段自动匹配与同步生成

示例：

更新数据

1.3 初始化数据​

用于页面加载时填充默认值，如编辑场景中预加载已有数据。

详细用法参考：数据绑定。

初始化数据

2. 表单项配置​

每个表单项支持设置：

  • 标签（Label）：字段显示名称
  • 数据项（Field）：对应的数据字段名
  • 是否禁用 / 是否隐藏

如绑定了“创建数据”或“更新数据”的接口，系统将根据 API 返回字段自动生成表单项。

示例：

表单项配置

3. 外观设置​

3.1 标签对齐方式​

标签位置可设置为：上、下、左、右，默认左对齐。

示例：

标签对齐方式 对齐方式效果对比

3.2 标签宽度​

标签宽度支持自定义，默认值为 60px，可根据设计需要调整。

示例：

标签宽度对比

3.3 显示冒号​

启用后，标签后自动添加冒号（:），符合常规表单风格。

示例：

冒号开关

4. 状态控制​

无特殊状态设置，通用状态详见：通用状态。

三、样式​

表单容器无独立样式配置项，通用样式设置详见：通用样式。

四、常见使用场景​

1. 数据新增或编辑场景​

如下为博客内容表单的设计，可用于新建或编辑博客内容：

博客内容表单