跳到主要内容

表单容器

高性能表单控件，自带数据域管理，包含数据录入、校验以及对应样式。

何时使用​

调用更新数据方法，或用于编辑回显数据并进行更新操作时使用。

  • 用于创建一个实体或收集信息
  • 需要对输入的数据类型进行校验时

一、属性​

1. 数据源​

image-20250625163258009

1.1 初始化数据​

初始化数据一般用于数据的回显，进入该页面后会触发加载数据事件。

1.2 创建数据​

创建数据用于新增数据，一般绑定新增数据的接口。

1.3 更新数据​

更新数据用于更新表单中的数据。表单容器可以同时绑定“创建数据”与“更新数据”的接口，提交表单时调用哪一个接口取决于表单数据是否包含主键：

  • 含主键：执行更新
  • 不含主键：执行创建

2. 表单项​

表单项的详细使用方式详见 表单项。

3. 外观​

3.1 布局方向​

布局方向设置可选项：水平、垂直、行内三种。

image-20240827152738364

默认布局为：水平

  • 水平布局示例：

    image-20240827153058668

  • 垂直布局示例：

    image-20240827153211439

  • 行内布局示例：

    image-20240827153418922

3.2 标签对齐​

标签对齐可选项：左对齐、右对齐。

image-20240827154236393

默认对齐方式为：右对齐

  • 左对齐示例：

    image-20240827154407596

  • 右对齐示例：

    image-20240827154453022

3.3 标签宽度设置​

标签宽度可调整左侧标签所占空间，默认单位为 span。

image-20240827155713294

也可设置为其他单位，如像素或百分比：

image-20240827160258907

3.4 左侧间距​

用于设置标签距离最左边的间距。

默认值为：0

image-20240827161812894

3.5 冒号设置​

默认开启冒号。关闭冒号后的表单效果如下：

image-20240827162105657

image-20240827162433867

二、常见使用场景​

1. 添加数据或更新​

如下图，假设设计了一个图书表，用于对图书进行新增或修改数据：

image-20240819163456754