# 树选择
树型选择控件。

## 使用规则

树形选择用于数据存在多级关系时，如公司层级、学科系统、分类目录等，支持单选和多选。

## 组成要素

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/665bf4c859c8390c267fc29b2427e855_Ai8npc5nV1.png?height=876&lazyload=true&maxWidth=800&width=2048)

1. **箭头**：表示该节点包含子级节点，用户通过点击此图标来展开或折叠该节点的子节点
1. **文本**：对该选项的具体描述，如有需要，可在文本前放置图标、头像、图片等
1. **复选框**：当树结构需要多选操作时，可以使用复选框。父节点的复选框的状态受子节点影响

## 控件类型

### 类型总览

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a92f3eede4fa6efe2fcf73d7390f7171_eTfEDEA4wU.png?height=844&lazyload=true&maxWidth=800&width=2048)

>图示：从左到右依次为基础树选择和勾选型树选择

### 基础树选择

#### 使用场景

**基础树选择-导航**<br>
提供多级结构来收纳和排列产品架构，让用户明确知晓当前所处的位置，并方便快捷的去到想去的地方。例如侧边导航栏。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b80f9bcb5bbfd0566833a566d4062df0_eESH03CexT.png?height=840&lazyload=true&maxWidth=600&width=2048)

<br>
**基础树选择-单选**<br>
用户从一组存在多级关系的选项中选择一项，可根据实际内容决定父级选项是否可选。例如选择部门或人员。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2e6db890fcc3443b870eda458aa36ddf_BBHLQLfSOm.png?height=696&lazyload=true&maxWidth=600&width=2048)

<br>
**基础树选择-多选**<br>
用户从一组存在多级关系的选项中选择一项或多项。和勾选型树选择的区别在于，此处的基础多选树选择，父级选项与子级选项存在一定关系，但父级选项的数据不是子级选项数据的集合，当选中父级选项时，并不会自动选中全部子集选项。例如在筛选数据表时，选择新员工和与新员工相关的主管数据。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cab2c59112cbc48fc55e3e903d810a4c_Hc6shAQbLo.png?height=676&lazyload=true&maxWidth=600&width=2048)

#### 通用样式规则

**样式与尺寸说明**

- 通常情况下选择框与下拉列表等宽
- **标题文本：** 14 号字，Regular
- **选择框：**
    - 部分遵循 Input 组件规范：原则上不对宽度做限制，但建议输入框最小宽度 240px，最大宽度 600px
    - 在选择过多内容时，选择框可自动变高承载选项，推荐最高为 188px（可根据实际场景调整），超出显示滚动。若选择框高度固定，超出选择框显示部分仅保留超出部分的数字
- **下拉列表：**
    - 下拉文本内容建议仅显示一行，当文本内容过长时优先考虑横向拓展下拉列表宽度（最大 420px）
    - 下拉列表推荐最大高度 256px，特殊场景可根据实际情况定制（例如国家或地区选择）

<br>
**状态说明**

当父级作为可选项时，点击父级选项，父级选项被选中，子集选项同时展开。
当父级作为不可选项时，点击父级，自动展开子集，父级选项为 Hover 态。

**基础树选择-导航（选中态需跟导航一起定义）**

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/29b08985cd0f42502c1956d034f9c94d_asZTlnXH9t.png?height=724&lazyload=true&maxWidth=600&width=2048)

**基础树选择-单选**

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/bb27e0e6cb24dff34e0f8579cc77ea12_KsOY6ge3aE.png?height=2424&lazyload=true&maxWidth=600&width=2720)

**基础树选择-多选**

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f3c70fcfe64d8115085864306c72728a_uKq1hl93Ng.png?height=2314&lazyload=true&maxWidth=600&width=2720)

### 勾选型树选择

#### 使用场景

用户从一组存在多级关系的选项中选择一项或多项。和基础多选树选择的区别在于，此处的勾选型树选择，父级选项的数据是子级选项数据的集合，当选中父级选项时，会自动选中全部子集选项。选择部分子级选项，父级选项呈部分选中态。例如选择产品部门、人员。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/aa7c7deb638d0aa904daba2d8acfb2e5_fxRZh4hWfX.png?height=696&lazyload=true&maxWidth=600&width=2048)

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/77827083a14abb1671f3233c0681b574_PgGdSuOeNr.png?height=830&lazyload=true&maxWidth=600&width=2048)

#### 通用样式规则

**状态说明**

点击父级选项，自动展开以下层级。点击复选框则选中该级。

二次激活下拉选择框，会定位并展开到被选项层级。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3dd722a9409c75ee4d482a7a993523ca_prDUapYfxl.png?height=2740&lazyload=true&maxWidth=800&width=2720)