需求说明
表单场景中通常需要使用关联模型的相关数据,例如有活动报名和活动分类两个数据模型,其中关联关系如下图,现有需求希望用户在活动报名的时候能选择活动类别并且能实时展示活动分类的详情信息。
实践方案
1. 新建数据模型活动报名和活动分类,数据模型结构展示。
1.1 其中活动报名数据模型字段类别关联关系如下图:
1.2 活动分类数据模型添加测试数据。
2. 在编辑器中使用表单容器,并设置相关字段。
3. 表单类别字段下拉选项默认显示被关联模型活动类别的主字段,也就是分类对应行的数据标识。
4. 返回活动类别数据模型,分类名称字段设置主展示列。
5. 表单容器中类别字段需要重新勾选,才能刷新最新数据模型配置。
6. 可以看到表单类别字段已经展示分类名称。
说明:
通过表单容器中的「关联关系、关联关系」字段生成渲染出下拉选择组件时,组件会自动根据字段绑定的 关联模型生成选项列表,并额外提供数据筛选属性,支持对选项进行筛选过滤(该情况下,选项名称强制为关联模型的主列字段,选项值强制为关联模型的数据标识字段) 。
7. 新建
query1
和变量 select_value
(文字类型),query1
用来用户选择分类的时候触发活动分类信息查询事件,select_value
用来存储当前分类选项标识。
8. 新增弹窗组件,用来展示活动分类的具体信息,弹窗相关配置如下,其中弹窗底部按钮“知道了”需要添加关闭弹窗事件。
9. 弹窗默认打开状态默认关闭,设置弹窗内容字段绑定 query,以分类名称为例。
说明:
用户活动报名的时候,选择分类,触发相关事件打开弹窗,弹窗用来展示活动分类的具体信息。
10. 配置分类下拉组件相关事件。
11. 选择分类,页面效果展示。