Treeselect

定义

Treeselect 是一种表单选择控件,其可选项不是平铺的列表,而是一棵具有父子层级的树。用户点击输入框后展开下拉面板,在树中逐级展开分支,最终选中一个叶节点或中间节点^[1][5]。它在形态上介于普通下拉选择框与独立树形控件之间,因此文档中常把它描述为下拉菜单与选择器的结合体^[1]。

当可选项构成公司层级、学科体系或分类目录时,平铺下拉框难以表达从属关系,树形选择组件正是为这类层级数据设计的^[2]。它既可以单选,也可以在开启复选模式后同时选择多个节点^[1][6]。

原理

组件内部把传入的选项数组递归转换为树,每个节点通常包含唯一标识、显示标签与子节点列表;比如 vue-treeselect 约定使用 id、label 与 children 字段^[7]。若后端返回的字段名不同,可通过规范化配置把数据映射为组件需要的结构^[8]。树的高度 $h$ 与节点总数 $n$ 的关系可表示为 $h \le n$,渲染通常按需展开分支而非一次性展示全部层级。

在单选模式下,选中一个节点即把该节点的标识写回绑定值;在多选模式下,组件维护一组选中键,并依据父子联动规则决定回填方式,例如只显示子节点、只显示父节点或显示全部选中节点^[2]。当数据量较大时,一些实现采用延迟加载与虚拟滚动,只渲染可视区域内的节点^[9]。

flowchart TD

A[根节点] --> B[一级分支]

A --> C[一级分支]

B --> D[叶子节点]

B --> E[叶子节点]

C --> F[叶子节点]

发展历程

面向 Vue 的独立实现 vue-treeselect 由 Riophae Lee 于 2017 年发布,采用 MIT 许可,要求 Vue 2.2 及以上版本,支持单选与多选、模糊匹配、异步搜索与键盘操作^[7][10]。此后社区出现了若干分支版本,分别针对现代浏览器目标、性能优化或 Vue 3 支持等方向进行改造^[11][12]。

另一方面,通用组件库也逐步内建了树形选择控件。Element Plus 的 TreeSelect 由树组件与选择组件组合而成,并区分出自身独有属性与被复用组件的原始属性^[1]。Ant Design 的同类组件则通过版本迭代不断增补属性,如 4.17.0 起支持自定义 label、value、children 字段,5.8.0 起支持对象形式的清除按钮^[2]。

生态中还出现了不依赖特定框架的原生实现,如 treeselectjs 以纯 JavaScript 方式提供树形多选,并提供分组值、独立节点等配置^[3][13]。

应用

树形选择组件主要用于录入层级化的字段,例如公司组织架构、学科体系与分类目录的选择^[2]。在后台管理系统中,它常被用于给用户或角色分配部门、地区或权限节点^[8]。

与表单校验、禁用状态、清除按钮等能力结合后,它可以嵌入到各类数据录入流程中^[6]。当待选数据来自服务端时,组件可配合异步搜索,在输入关键字后再请求匹配结果^[7]。

局限

树形结构对数据的规范程度要求较高,vue-treeselect 明确要求 id 在选项集合中唯一,重复的 id 会导致选中状态出错^[7]。当后端返回的分层数据字段名与组件约定不一致时,必须额外做一次结构转换,否则无法正确渲染^[8]。

多选与父子联动同时开启时,选中结果的回填容易出现歧义,组件因此提供多种回填策略供选择,但每种策略都只覆盖部分使用需求^[2]。此外,层级很深或节点很多的树会带来渲染与展开性能压力,一些实现需要借助延迟加载或虚拟滚动来缓解,这也意味着数据必须支持分层的按需请求^[9]。

部分早期实现存在框架版本约束,vue-treeselect 要求 Vue 2.2 及以上版本,在 IE9 上虽可运行,但过渡与动画等样式特性缺失会导致外观出现偏差^[7]。

参见

• 下拉选择框 —— 一种平铺选项的输入控件,树形选择组件在其基础上引入了层级结构。

• 树形控件 —— 以树状层级展示数据的交互组件,是树形选择组件的面板基础。

• 虚拟滚动 —— 大数据量列表中只渲染可视区域节点的性能优化技术。

• 延迟加载 —— 在需要时才加载深层节点数据的策略。

• 表单控件 —— 用于采集用户输入的一类界面元素。