如何使用级联多选组件实现层级关系_云原生应用组装平台 BizWorks-阿里云帮助中心

使用场景

当选择的菜单存在层级关系，且需支持多选时，您可以使用级联多选组件。

使用说明

如果不配合表单容器组件使用级联多选组件，绑定变量需配置为List<String>类型。
如果配合表单容器组件使用级联多选组件，对象字段需配置为List<String>类型，表单组件绑定变量中的某个Key。
配置选项配置：其选项来源的类型需为List<Structure>类型，数据源支持固定值和动态值。
- 当数据源为固定值时，您可以单击编辑数据，在数据编辑对话框中配置。
- 当数据源为动态值时，您需要绑定一个类型为List<Structure>类型的变量，其中Structure为级联多选组件中每项数据对应的类型。

使用示例

如果不配合表单容器组件使用级联多选组件，您可按需进行添加List<String>类型的变量（例如：cascaderMultiSelectValue）。若选中A部门和a产品，则cascaderMultiSelectValue=["part_a","product_a"]。

数据源

[
  {
    "value": "part",
    "label": "部门",
    "children": [
      {
        "value": "part_a",
        "label": "A部门",
        "children": []
      },
      {
        "value": "part_b",
        "label": "B部门",
        "children": []
      }
    ]
  },
  {
    "value": "product",
    "label": "产品",
    "children": [
      {
        "value": "product_a",
        "label": "a产品",
        "children": []
      },
      {
        "value": "product_b",
        "label": "b产品",
        "children": []
      }
    ]
  }
]

使用级联多选组件的页面效果，如下图所示。

如果配合表单容器组件使用级联多选组件，具体操作步骤如下。
1. 为表单容器组件绑定变量，该变量需为Structure类型。
2. 为级联多选组件绑定对象字段，下图中对象字段（p1）是表单容器组件绑定变量（_dataQuery）对象中的Key。