设置二次开发触发选中传递

在山海鲸可视化中，选中传递是一种常用的组件交互方式，常用于在不同组件之间同步“选中状态”，例如点击某个控件后，让表格行、列表项或搜索结果自动被选中，从而触发后续的数据展示或联动效果。

需要注意的是，选中传递并不是所有组件都支持，只有带有“选中传递”相关设置项的组件才能使用该功能，例如菜单、表格、搜索框等。像按钮这类本身不具备选中状态的组件，无法直接参与选中传递。

在实际项目中，我们可能会遇到这样的需求：点击按钮后选中表格中的某一行，再通过另一个按钮取消选中状态。但由于按钮组件本身不支持选中传递，无法直接作为传递源，因此需要借助一个支持选中传递的中间组件来实现，这里我们以“横向菜单”组件为例进行演示。

1）首先，添加“横向菜单”组件、“基础数据表格”组件和两个“按钮”组件，添加数据字段并调整样式，如下图所示：

2）接着选中“基础数据表格”组件，开启“接收其他组件传递”，并在“选中字段”处添加“姓名”字段。

3）然后选中用于选中表格行的“按钮”组件，添加二次开发代码文件，并设置“选中传递组件”为“横向菜单”组件。

二次开发代码示例如下所示：

export class Button {
    // 找一个带选中传递的组件
    选中传递组件 = Element.empty();
    init() {
        this.element.addEventListener("触发选中", () => {
            this.选中传递组件.applySelection({ "姓名": "小张" });
        });

        this.element.addEventListener("取消选中", () => {
            this.选中传递组件.withdrawSelection();
        });
    }
}

4）继续为该“按钮”组件设置交互，交互设置如下图所示：

5）然后为用于取消选中的“按钮”组件设置交互，“目标组件”为用于选中表格行的“按钮”组件，如下图所示：

6）最后选中“横向菜单”组件，开启“传递给其他组件”。

最终效果如下图所示：