如何用SuperGUI实现动态传参功能?

huskyalicia77 关注 3

动态传参功能为SuperGUI V2.5版本的新功能,可实现与上游组件间的动态数据级交互。下面就来为大家讲解下该功能是如何实现的。
先来看下最终实现后的结果,下拉切换城市,列表中的数据根据下拉框选项进行数据切换。
image.png

参数变量,可以用于控制组件之间参数的传递,从而达到交互的目的。

1. 确认参数
当选择下拉组件某个城市后,城市名所对应的code值,就会当作参数,到表格组件的动态API数据中查询到该字段。这样可以联动两个组件的即为可传参字段。

下拉组件数据:
[
{
“name”: “上海”,
“code”: “shanghai”
},
{
“name”: “北京”,
“code”: “beijing”
},{
“name”: “天津”,
“code”: “tianjin”
},{
“name”: “河北”,
“code”: “hebei”
}
]

2. 设置参数
SuperGUI中,需在API接口地址处,用{ }的方式设置传参字段。
如:表格组件的数据配置,{code}即为上游的下拉菜单组件传参字段名。

image.png

3. 设置蓝图
画布的数据配置处完成后,需要在蓝图中设置更新组件数据的操作,同时需要点击连线,打开“上游数据作为参数请求组件自身接口”的开关,只有打开后,设置的参数才能生效。

image.png

阅读 421 本作品系原创,转载请联系作者授权
赞 1 收藏
全部评论({{commentCount}}条评论)
得票数 最新

暂无数据