级联选择

级联选择组件用于实现下拉级联菜单。

在表单设计页面，从“常用组件”中，拖拽“级联选择”组件至表单设计区域，如图1所示。

图1 拖拽级联选择组件到设计区并设置属性

• 标题：该字段在表单页面呈现给用户的名称。
• 帮助提示：为字段添加帮助信息。设置后，标题字段后会显示。
• 描述信息：为字段添加附件的说明信息。
• 状态：设置字段的状态，如普通、禁用、只读和隐藏。
  • 普通：设置为普通后，页面上该字段可正常显示，且可进行配置。
  • 只读：设置为只读后，页面上该字段只可读。
  • 禁用：设置为禁用后，页面上该字段仍可显示，但不可进行配置。
  • 隐藏：设置为隐藏后，页面上会隐藏该字段。
• 选项 > 编辑层级：设置下拉级联菜单的层级，支持编辑树形结构和编辑代码两种方式。

  例如，新增“选项2>选项2-2>选项2-2-2”级联菜单，具体步骤如下：

  • 编辑目录树结构
    1. 在级联菜单属性设置页面，单击“编辑层级”。
    2. 在编辑选项层级页面，单击“新增节点”，新增名称为“选项2”的节点。
       图2 新增选项2菜单
       
    3. 将鼠标放在新增的“选项2”节点上，单击图标，新增子选项2-2。
       图3 新增选项2-2
       
    4. 同样，将鼠标放在“选项2-2”上，新增子选项2-2-2，完成后单击“确定”。
       图4 新增子选项2-2-2
       
    5. 在表单设计页面，单击“保存并预览”，即可预览效果。
       图5 新增级联层级最终显示效果（编辑目录树结构）
       
  • 编辑代码
    1. 在级联菜单属性设置页面，单击“编辑层级”。
    2. 在编辑代码页签，输入如下代码，单击“确定”。

       [
           {
               "label": "选项1",
               "value": "1",
               "children": [
                   {
                       "label": "选项1-1",
                       "value": "1-1",
                       "children": [
                           {
                               "label": "选项1-1-1",
                               "value": "1-1-1"
                           }
                       ]
                   }
               ]
           },
           {
               "label": "选项3",
               "value": "选项3",
               "children": [
                   {
                       "label": "选项3-3",
                       "value": "选项3-3",
                       "children": [
                           {
                               "label": "选项3-3-3",
                               "value": "选项3-3-3"
                           }
                       ]
                   }
               ]
           }
       ]

    3. 在表单设计页面，单击“保存并预览”，即可预览效果。
       图6 新增级联层级最终显示效果（编辑代码）
       
• 是否必填：字段是否必填。设置为必填时，字段前会带“*”。
• 占位符：设置字段的占位符。
• 默认值：设置该字段的默认值。
• 允许清空：下拉级联菜单是否允许为空。启用和禁用后，显示效果如图7所示。
  图7 设置效果