跳到主要内容

表单容器

适用场景#

快捷实现表单数据的提交与展示场景。绑定数据源后，可根据字段类型自动生成单行输入、下拉选择、提交按钮等组件

基础能力说明#

通过表单容器进行表单数据的新增、更新或查看
支持绑定数据模型或 APIs 类型的数据源，来实现前后端的数据交互
通过字段属性，可控制内部表单组件的排序、显隐，和切换字段映射的组件类型
更多实践说明，可查阅表单常见场景的实践指南

扩展场景说明#

在表单中对用户输入数据进行计算展示#

示例

在 2 个单行输入组件中输入单价和数量，在第 3 个单行输入组件中展示总价（单价*数量）

配置方法

创建一个数据模型售价计算数据模型，创建 3 个数字类型的字段，分别命名为：单价、数量、总价
在页面中拖入一个表单容器，利用「售价计算」模型生成表单
总价字段映射生成的单行输入组件中，找到输入值属性，绑定表达式，选择「数据字段」中的单价和数量，使其相乘（使用*运算符），然后保存表达式
预览区/运行态，在单价和数量输入框中输入数值后，总价会显示为单价*数量得到的总价

使用 1 个表单容器组件动态实现数据新增、更新和查看场景#

示例

为表单容器的「表单场景」属性绑定变量，为变量赋不同值实现新增、更新和查看场景

配置方法

创建一个 string 类型的变量，命名为 sence
表单容器绑定一个所需数据模型，渲染生成表单组件，然后将表单容器的「表单场景」属性绑定该 sence 变量
在不同业务下，为 sence 变量赋不同值，表单容器可实现不同作用
1. 赋值 create→ 表单容器为新增场景，用于数据的新增提交
2. 赋值 edit→ 表单容器为更新场景，用于已有数据的编辑更新
3. 赋值 read→ 表单容器为查看场景，用户已有数据的回显查看

数据源类型为 APIs 时，方法参数的格式要求#

表单场景为「新增」时，需配置
1. 新增方法：要求业务所需的表单字段平铺放在入参根节点中，例：
表单场景为「更新」时，需配置
1. 查询方法：要求表单字段平铺放在出参根节点中，例：
2. 更新方法：要求业务所需的表单字段平铺放在入参根节点中，例：
表单场景为「查看」时，需配置
1. 查询方法：要求表单字段平铺放在出参根节点中，例：

属性介绍#

组件接收的外部传入的属性

表单场景	`formType`	`string`	基础属性	"create"	-
数据源	`datasourceType`	`string`	基础属性	"model"	-
数据模型	`dataSourceName`	`string`	基础属性	""	-
数据标识(_id)	`_id`	`string`	基础属性	""	-
新增方法	`methodCreate`	`string`	基础属性	""	-
查询方法	`methodGetItem`	`string`	基础属性	""	-
查询入参	`paramGetItem`	`object`	基础属性	{}	直接输入对象字面量, 如 {status: 1}
更新方法	`methodUpdate`	`string`	基础属性	""	-
布局方式	`layout`	`{"label":"水平","value":"horizontal"}\|{"label":"垂直","value":"vertical"}`	基础属性	"horizontal"	设置当前容器内表单类组件的标题和输入选择区域为左右布局或上下布局
字段	`fields`	`array`	基础属性	-	-

事件介绍#

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

提交	`submit`		兼容三端	-
context update	`onDataChange`		兼容三端	-

适用场景
基础能力说明
扩展场景说明
属性介绍
事件介绍