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