TreeSelect 树形选择器

树形结构选择，支持父子级联多选。

单选

单选

示例代码

点击节点即选中并关闭下拉，支持展开 / 收起子级。

多选（父子联动）

多选（multiple）

示例代码

多选时选中父级会级联选中全部子级，再次点击取消；父级节点呈「全选 / 半选」态。

勾选策略（check-strategy）

check-strategy 控制多选时写入 value 的节点集合：all（默认）父级与子级全部进入值；parent 只保留父级（子级全选时以父级为代表）；child 只保留叶子节点。三种策略共用同一套级联勾选逻辑，仅对外值不同：

勾选策略对比（all / parent / child）

all：值 = —

parent：值 = —

child：值 = —

示例代码

勾选「前端」后三个策略的 value 分别为：all → ["fe","framework","vue","react","css"]，parent → ["fe"]，child → ["vue","react","css"]（顺序随 demo 数据中「框架」子节点的声明顺序）。parent 策略下逐个勾选叶子，待某父级子节点全选后，值自动收敛为该父级。

预设值

预设值（value）

示例代码

受控展开（expanded）

expanded 为 JSON 数组，声明展开节点的 value 集合（受控通道）：外部修改属性即时反映到下拉树。以下预设展开「前端 → 框架」，并用按钮外部驱动：

受控展开（expanded）

全部展开全部收起

示例代码

预设 expanded='["fe","framework"]' 使首次展开下拉时「前端」「框架」已展开；点击「全部展开」外部写入 expanded='["fe","framework","be"]'，全部收起写入 '[]'，下拉打开时即时重渲染。

大数据量（虚拟滚动）

万级节点虚拟滚动

全部展开全部收起

示例代码

设置 virtual 开启虚拟滚动（搭配 height 视口高度、item-height 行高）：下拉复用 oas-virtual-list 只渲染可见窗口，10100 个节点（100 部门 × 100 成员）滚动流畅；键盘 ↑/↓ 移动高亮、Enter 勾选、→/← 展开收起，aria-activedescendant 随窗口滚动保持有效。数据由脚本注入（options 属性通道），展开集合受 expanded 属性控制，点击「全部展开」外部写入全量节点集合。

禁用

禁用

示例代码

空态

无数据

示例代码

事件

变化事件

示例代码

监听 oas-change，detail.value 单选为字符串、多选为数组：

API

属性

属性	说明	类型	默认值
check-strategy	多选勾选策略：all（默认）父级与子级全部进入值；parent 只保留父级（子级全选时以父级为代表）；child 只保留叶子节点	string	all
disabled	禁用	boolean	—
expanded	展开节点的 value 集合（JSON 数组，受控）	string	[]
height	虚拟滚动视口高度（px）；与 virtual 搭配生效	string	288
item-height	虚拟滚动每行固定高度（px）	string	36
multiple	多选 + 父子级联	boolean	—
options	树形选项，JSON 数组，支持 children / disabled	TreeOption[] | string	[]
placeholder	占位提示	—	—
value	选中值（多选为 JSON 数组）	string	[]
virtual	开启虚拟滚动：大数据量下拉仅渲染可见窗口（复用 oas-virtual-list），键盘/ARIA 保持	boolean	—

事件

事件	说明
oas-change	选择变化，detail: { value }