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