# 树形下拉框2024.5+

以树形结构展示选项，可以在具有层级关系的选项中进行选择。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
尺寸： 组件尺寸。
- 大
- 中
- 小
- 超小
占位文本： 没有选中值时，输入框中的展示。
是否多选： 是否开启多选。
折叠选项： 开启多选后可以选择是否折叠选项。
清空选项： 是否显示清空选中项的图标。
搜索选项： 是否可在选项中搜索。
展开子项： 是否默认展开所有节点。
节点独立： 在多选的情况下，是否严格的遵循父子不互相关联。
节点缩进： 相邻级节点间的水平缩进，单位为像素。

# 编辑框

背景颜色: 编辑框背景颜色。
高度: 编辑框高度。
字体颜色: 编辑框字体颜色。
字体大小: 编辑框字体大小。
字体粗细: 编辑框字体粗细。
字体: 编辑框字体样式。
边框颜色: 编辑框的边框颜色。
边框宽度: 编辑框的边框宽度。
边框类型: 编辑框的边框类型。
选中标签样式： 选中标签样式设置。
- 背景颜色： 选中标签背景颜色。
- 高度： 选中标签高度。
- 行高： 选中标签行高。
- 字体颜色： 选中标签字体颜色。
- 字体大小： 选中标签字体大小
- 字体粗细： 选中标签字体粗细。
- 字体： 选中标签字体样式。
- 边框颜色： 选中标签边框颜色。
- 边框宽度： 选中标签边框宽度。
- 边框类型： 选中标签边框类型。

# 数据

数据面板具体配置组件管理 -> 数据

# 静态数据

上图中的示例JSON代码如下：

[
    {
        "id": 0,
        "parentId": 2,
        "label": "选项一",
        "value": "option1",
        "selected": true,
        "disabled": false
    },
    {
        "id": 1,
        "parentId": 2,
        "label": "选项二",
        "value": "option2",
        "selected": true,
        "disabled": false
    },
    {
        "id": 2,
        "parentId": 20,
        "label": "选项三",
        "value": "option3",
        "selected": false,
        "disabled": true
    },
    {
        "id": 3,
        "parentId": 20,
        "label": "选项四",
        "value": "option4",
        "selected": false,
        "disabled": true
    },
    {
        "id": 4,
        "parentId": 2,
        "label": "选项五",
        "value": "option5",
        "selected": true,
        "disabled": false
    },
    {
        "id": 5,
        "parentId": 2,
        "label": "选项六",
        "value": "option6",
        "selected": true,
        "disabled": false
    },
    {
        "id": 6,
        "parentId": 2,
        "label": "选项七",
        "value": "option7",
        "selected": true,
        "disabled": false
    },
    {
        "id": 7,
        "parentId": 2,
        "label": "选项八",
        "value": "option8",
        "selected": true,
        "disabled": false
    },
    {
        "id": 8,
        "parentId": 2,
        "label": "选项九",
        "value": "option9",
        "selected": true,
        "disabled": false
    },
    {
        "id": 9,
        "parentId": 2,
        "label": "选项十",
        "value": "option10",
        "selected": true,
        "disabled": false
    }
]

# 交互

# 选中值改变事件

勾选启用，开启选中值改变事件。当树形下拉框组件选中数据时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件管理 -> 交互。

# 数据响应

树形下拉框支持数据响应配置。

# 节点编程

# 事件

选中值改变事件： 选中值改变时触发事件。
- 抛出的参数： 改变后树形下拉框的数据。

# 动作

设置选中值： 可重新设置选中值。
- 接收的参数： 新的选中值。
清空选中值： 可清空选中值。
- 接收的参数： null
重置选中值： 可重置设置选中值。
- 接收的参数： null

← 下拉框级联下拉框 →

# 树形下拉框2024.5+

# 属性

# 基础

# 编辑框

# 标签

# 数据

# 静态数据

# 交互

# 选中值改变事件

# 数据响应

# 节点编程

# 事件

# 动作