树

概述

版本

功能说明

树组件用于展示层级化数据结构，支持节点展开 / 折叠、节点点击交互、选中高亮，适用于组织架构、分类目录、事件层级等场景的大屏 / 移动端页面搭建。

效果案例（实际样式）

树组件默认采用深色主题适配，支持层级连接线、展开折叠交互，实际效果如下：

配置

基础属性

基础属性为所有组件通用配置，控制组件的基础布局与显示状态：

配置

1. 全局配置

控制组件的基础展开模式、弹窗/下拉面板样式及收起状态选择框样式。

2. 树配置

控制下拉/弹窗内树结构的交互规则、节点层级与样式。

多选取值规则说明：

1. 枝节点开启、叶子节点关闭：仅取值选中的枝节点
2. 枝节点开启、叶子节点开启：同时取值枝节点及其所有选中的子叶子节点
3. 枝节点关闭、叶子节点开启：仅取值选中的叶子节点

3. 标签配置

控制已选中节点标签的外观样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "id": "1",
        "content": "选项1",
        "parentId": "",
        "leaf": false
    },
    {
        "id": "2",
        "content": "选项2",
        "parentId": "",
        "leaf": false
    },
    {
        "id": "3",
        "content": "选项3",
        "parentId": "",
        "leaf": true
    },
    {
        "id": "4",
        "content": "选项1-1",
        "parentId": "1",
        "leaf": false
    },
    {
        "id": "5",
        "content": "选项1-2",
        "parentId": "1",
        "leaf": false
    },
    {
        "id": "6",
        "content": "选项1-3",
        "parentId": "1",
        "leaf": false
    },
    {
        "id": "7",
        "content": "选项1-1-1",
        "parentId": "4",
        "leaf": true
    },
    {
        "id": "8",
        "content": "选项1-1-2",
        "parentId": "4",
        "leaf": true
    },
    {
        "id": "9",
        "content": "选项2-1",
        "parentId": "2",
        "leaf": true
    }
]

交互

支持配置节点点击事件
当切换选中时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置 JS 事件、设置面板状态。