山海鲸可视化

设置选中传递

在大屏编辑过程中,我们可能会需要通过点击某个组件,实现另一个组件内容的切换,这时我们就需要设置选中传递了。

选中传递的方式包括:传递给其他组件接收其他组件传递

所谓传递给其他组件,就是操作当前组件时,其他组件会接收到该操作;

所谓接收其他组件传递,就是当其他组件被操作时,本组件会接收到该操作;
image.png

每种选中传递方式在开启后都可以进行高级设置,高级设置中包括黑名单模式和白名单模式设置。

所谓黑名单模式,就是将组件黑名单中的组件排除在选中传递组件之外;

所谓白名单模式,就是只传递组件白名单中的组件操作;
image.png

本文将以下拉菜单可切换分组面板为例进行演示。
image.png

以下为本教程中使用的示例数据。

城市
北京
上海
杭州

1. 添加组件

首先,创建空白项目,添加一个下拉菜单组件和一个可切换分组面板组件。

2. 添加数据字段

然后,在下拉菜单组件中添加数据字段,包括“选项字段”“联动字段”,这里我们添加的是“城市”字段。
image.png

可切换分组面板组件中绑定“联动字段”,在“联动字段”中输入“城市”,在“联动值”中输入“城市”字段中包含的数据。
image.png

3. 设置选中传递

首先在下拉菜单组件中,开启“选中传递”中的“传递给其他组件”
image.png

接着在可切换分组面板组件中,开启“选中传递”中的“接收其他组件传递”
image.png

4. 效果演示

最后,为了方便给大家进行演示,这里将可切换分组面板组件中的内容修改为对应的城市名称。
image.png

这样,当我们点击下拉菜单中的选项时,可切换分组面板就会切换至对应的分组面板,最终效果如下图所示:
选项传递.gif