一、先搞懂：樹狀結構的核心概念
樹狀結構是倒置的層級化數據表達形式，頂端為根、向下延伸分支與葉子，清晰呈現數據的從屬、并列關系，是 B 端結構化信息展示的最優解之一。
1. 核心節點定義
- 根節點：樹的唯一起點，樹形選擇中常隱藏，以標題 / 選項文本替代，避免視覺冗余。
- 子節點：根節點以下的所有節點，無數量限制，是樹形選擇的核心展示內容。
- 葉節點：無下級子節點的末端節點，是傳統單選樹的唯一可選對象。
- 分支：節點間的連接關系，可通過線條顯隱強化層級感知。
2. 關鍵屬性
- 節點層級：根節點為 1 級，向下依次遞增，直觀區分數據隸屬關系。
- 節點高度：當前節點到最底層葉節點的層級數量。
- 節點深度：當前節點到根節點的路徑長度，與層級概念相近。
日常場景中，字典檢索、省市縣地址、公司組織架構、課程分類，都是典型的樹狀結構應用，核心價值是快速定位、結構化管理、高效增刪改查。
二、樹形選擇的基礎組成
樹形選擇的結構設計直接影響操作效率，核心由 4 部分構成，每部分都有明確的設計規范：
1. 層級縮進
統一用
8px作為下級節點的縮進基準，清晰區分層級；
數據量大、層級復雜時，搭配
分支線條強化結構，避免視覺混亂。
2. 折疊圖標
分為兩種樣式，適配不同層級場景：
- 三角折疊：適合層級≤3 級的簡單場景，輕量化、易理解。
- 方形折疊：搭配分支線條使用，適合 4 級及以上的多層級場景，層級辨識度更高。
3. 選擇控件
分單選、多選兩類，遵循「簡化操作、明確狀態」原則：
- 單選：默認隱藏控件，以整個選項文本為熱區，點擊即選中。
- 多選：必顯復選框，置于折疊圖標左側，預留后續功能拓展空間（新增、刪除、拖拽等），同時降低前端開發成本、減少 BUG。
4. 選項文本
控制字符長度，超長文本用省略號截斷，hover 時展示完整內容，保證界面整潔。
三、樹形選擇的三大類型（核心差異）
樹形選擇按交互邏輯分為三類，單選節點樹、多選節點樹為主流，傳統單選樹已極少使用。
1. 單選樹（淘汰型）
僅支持選擇葉節點，需逐層展開才能操作，選擇熱區小、理解成本高、效率低，僅適用于極特殊的定制場景，不推薦通用設計使用。
2. 單選節點樹（主流）
支持選擇
任意子節點，選中即代表該節點及下級所有數據，大幅提升效率；
交互拆分為兩個獨立熱區：
- 左側：折疊圖標，僅控制展開 / 收起。
- 右側：整個選項區域，點擊即選中當前節點。
?? 必須添加 hover 狀態，通過光標變化提示可點擊，降低操作認知成本。
3. 多選節點樹（最常用）
在單選節點樹基礎上增加復選框，支持批量選擇多個節點 / 分支；
理論上的「多選樹」（僅選葉節點）無實際業務價值，完全可被多選節點樹替代；
?? 動態數據場景慎用：如「部門權限自動同步新員工」這類動態關聯需求，樹形選擇無法清晰傳遞邏輯，需單獨做關聯配置，避免用戶誤解。
四、樹形選擇的核心優勢
- 易理解：樹狀結構認知成本低，用戶無需學習即可快速上手。
- 快瀏覽：大數據量下，可按層級快速篩選，比普通下拉選擇效率更高。
- 顯結構：清晰呈現數據層級關系，幫助用戶快速理解業務框架。
五、設計必避：3 大常見誤區
1. 忽視數據量承載
數據量過大時，必須做異步加載、分頁、搜索篩選，避免一次性渲染導致卡頓，同時優化滾動體驗。
2. 全選功能設計草率
大數據量場景下，全選需增加 **「半選」狀態 **（僅選中部分子節點），并明確提示選中數量，避免用戶誤操作。
3. 缺失鍵盤交互映射
B 端高效操作需支持鍵盤快捷鍵，規范如下：
- ↑：切換上一同級節點，從子節點返回父節點。
- ↓：切換下一同級節點，進入已展開的首個子節點。
- ←：關閉當前節點，返回父節點。
- →：展開子節點，進入首個子節點。
- 回車：確認選中當前聚焦節點。
六、總結
樹形選擇是 B 端層級數據選擇的最優組件，設計核心是簡化層級認知、拆分操作熱區、適配業務場景：優先用單選 / 多選節點樹，放棄傳統單選樹；多層級加分支線條，大數據量加異步加載，同時補齊鍵盤交互，最終實現「易看、易點、易懂、高效」的使用體驗。
