ICEN UI

树选择

从组织或分类树中选择一项或多项。支持父子联动、搜索与直接移除已选项。

点父整树勾选（三态联动）· 搜索「DBA」看祖先自动展开 + 命中高亮 · chips 超 3 个收 +N

html
<div id="demo-tree-select" style="width:100%;max-width:340px"></div><p class="demo-label" id="tree-select-log" style="margin-top:8px">点父整树勾选（三态联动）· 搜索「DBA」看祖先自动展开 + 命中高亮 · chips 超 3 个收 +N</p>
行为与接口说明

createTreeSelect 装配树选择：组织架构 / 权限树这类层级多选或单选。面板内嵌树（平铺行 + --depth 缩进，--lined 连接线变体）：展开/折叠 chevron，单选任意级可选（leafOnly 仅叶子），多选 + checkable 三态勾选（父 = 子集并集，混合态诚实呈现，disabled 子不进值）；multiple trigger 显示 chips（超 3 个收 +N，单项 × 悬停移除）。searchable 过滤命中自动展开祖先、命中词 <mark> 高亮，无命中 empty 态。键盘 ↑↓ 移动 / → 展开进首子 / ← 折叠回父行 / Enter 激活 / Esc 关；trigger role=combobox，树 role=tree / 行 role=treeitem（aria-level/posinset/setsize、aria-expanded/selected/checked）。面板 portal + PanelSizing 契约同 cascader。事件 icen:tree-select-change { value, labels }（与 onChange 双通道）；handle.expandAll()/collapseAll()；同 el 重复 create 先销毁旧实例。

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/tree-select';

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add tree-select

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/tree-select.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

js
import { createTreeSelect } from '@icen.ai/ui/kit/tree-select';const handle = createTreeSelect(el, {  nodes: [                                    // TreeNode 树    { value: 'rd', label: '研发', children: [      { value: 'fe', label: '前端' },      { value: 'be', label: '后端' },    ] },  ],  multiple: true,  checkable: true,                            // 三态勾选（父 = 子集并集，混合态）  searchable: true,                           // 过滤命中自动展开祖先 + mark 高亮  leafOnly: false,                            // 单选时仅叶子可定值（默认任意级可选）  clearable: true,  onChange: (value, labels) => {},            // 与 icen:tree-select-change { value, labels } 双通道});handle.getValue();                            // ['fe', 'be']（文档序）handle.getLabels();handle.setValue(['fe']);                      // 程序化回填（静默）handle.open(); handle.close();                // close 后焦点回到触发器（焦点在面板内时）handle.clear(); handle.expandAll(); handle.collapseAll(); handle.destroy();