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

使用场景

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

使用说明

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

使用示例

如果不配合表单容器组件使用级联单选组件，您可按需进行添加String类型的变量（例如：cascaderSelectValue）。若选中A部门，则cascaderSelectValue="part_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": []
      }
    ]
  }
]

使用级联单选组件的页面效果。展开下拉框后，左侧显示一级选项部门和产品，选中部门后右侧展开显示二级选项A部门和B部门。

如果配合表单容器组件使用级联单选组件，具体配置步骤如下。
1. 为表单容器组件绑定变量，该变量需为Structure类型。在右侧属性面板中，从绑定变量下拉列表中选择目标变量（例如data）。
2. 为级联单选组件绑定对象字段，其中对象字段（p1）是表单容器组件绑定变量（_data）对象中的Key。配置位置与上一步类似，在右侧属性面板中完成设置即可。