文档中心>腾讯云微搭低代码>实践教程>表单场景实践指南>表单/表格组件绑定表达式(query)的实践指南

表单/表格组件绑定表达式(query)的实践指南

最近更新时间:2024-06-14 10:26:11

我的收藏

表单场景说明

快速生成表单

1. 在微搭编辑器中,拖入一个表单容器组件,单击使用数据源生成表单,打开数据源配置弹窗。



2. 按需选择表单场景。
如需新增数据,则勾选新增。
如需更新已有数据,则勾选更新+查看。
如仅需查看已有数据,则勾选查看。



3. 数据源可选择数据模型、APIs 或 MySQL,不同的数据源类型,会提供差异化的配置项,以便确定表单的生成要求。
数据源选择 APIs 时,对 APIs 方法入参有以下要求。
场景为新增时,新增方法属性绑定的 APIs 方法:表单字段平铺放在入参根节点中,例:



表单场景为更新+查看时:
查询方法属性绑定的 APIs 方法:表单字段平铺放在出参根节点中,例:



更新方法属性绑定的 APIs 方法:表单字段平铺放在入参根节点中,例:



表单场景为查看时,查询方法属性绑定的 APIs 方法:表单字段平铺放在出参根节点中,例:



4. 完成数据源的相关配置后,单击确定,即可生成表单。

表单绑定表达式

1. 在功能改版后,表单容器的数据源类型增加了表达式选项,用于对整个表单进行灵活的初始化赋值。



2. 表单容器的数据源选择表达式后,属性区会额外显示表单值属性,该属性中写入对象格式的 JSON 数据,例如 {key1:value1},然后内部表单组件的绑定字段属性绑定对象中的 key,即可回显 key 对应的 value。
3. 功能示例。
3.1 在编辑器画布中拖入一个表单容器组件,数据源属性切换到表达式选项。



3.2 组件的表单值属性,单击 fx 开启表达式模式,写入一个对象示例,例如:{name:"李明",age:"30",address:"北京市"}


3.3 在表单容器中拖入3个单行输入组件,将三个组件的绑定字段属性分别改为 name、age、address,则组件会被赋值并显示表单容器-表单值中对应 key的 value。




表格场景说明

快速生成表格

1. 在微搭编辑器中,拖入一个数据表格组件,单击使用数据源生成表格,打开数据源配置弹窗。



2. 按需选择数据源,然后勾选功能场景:
查询多条记录:以表格形式展示多条数据。
新增数据:额外显示新增按钮,单击可打开新增数据弹窗。
查看单条数据:额外显示查看按钮,单击可打开查看数据详情弹窗。
更新数据:额外显示更新按钮,单击可打开编辑数据弹窗。
删除单条数据:额外显示删除按钮,单击进行单条数据删除。
批量删除:额外显示批量删除按钮,勾选数据记录后可进行批量删除操作。
(数据源类型为 APIs 时,仅支持查询多条记录场景)



3. 不同的数据源类型,会提供差异化的配置项,以便满足表格的生成需求。
数据源选择数据模型时,按需配置数据字段,然后单击提交即可。



数据源选择 MySQL 时,要额外配置数据标识,选择 MySQL 数据表中能表示唯一标识符的字段即可。



数据源选择 APIs 时,
3.1.1 首先需确保绑定的 APIs 方法,符合以下要求:
最外层的入参中,配置 pageNo、pageSize 参数,实现服务端分页(如仅需查询单页数据,则无需该参数)。



最外层的出参中,配置 total 参数,用于输出数据的总条数(如仅需查询单页数据,则无需该参数);配置对象数组类型的 records 参数,参数内层按需配置该数组中的子元素 key,用于实现数据 list 的查询(records 的子元素中,必须有1个 key 表示每条记录的唯一标识)。



以上参数的字段标识均可自由填写,整体参数结构符合以上要求即可。
3.1.2 接下来回到数据源配置弹窗,填写对应配置,其中,需额外注意,如选择了服务端分页,则:
查询入参:需找到 pageNo 和 pageSize 参数,分别绑定当前表格组件属性 API:页码($w.{组件ID}.pageNo)和每页大小($w.{组件ID}.pageSize)。
记录列表:绑定 APIs 出参中对象数组类型的 records 参数。
数据标识:绑定 APIs 出参中 records 参数中表示唯一标识的 key。
记录总条数:绑定 APIs 出参中的 total 参数。



3.1.3 完成以上配置后,单击提交,即可生成表格进行使用。

表格绑定表达式

请参见以下文档了解表格绑定表达式的详细说明:配置表格数据