TreeSelect 樹形選擇

選項有層級關係的下拉選擇。使用 Element Plus 的 el-tree-select。

設計準則

• 選項天然有層級(部門、商品分類、地區)才用;攤平反而清楚的清單用一般 Select
• 層級盡量 3 層以內,更深表示資訊架構該檢討,不是換更能裝的元件
• 多選用 multiple + show-checkbox,並加 collapse-tags(同 Select 的多選準則)
• 選項多時加 filterable,搜尋會自動展開包含結果的節點
• 想清楚「父節點可不可以選」:只能選到末端(預設)還是每一層都能選(check-strictly),要和資料規則一致

基本用法

loading

多選(勾選框)

loading

可搜尋

loading

Do / Don't

✅ Do	❌ Don't
天然層級(部門、分類)	平面清單硬做成樹
層級 ≤ 3 層	五層樹讓人迷路
想清楚父節點可不可選	有時選得到部有時只能選組
多選加 collapse-tags	標籤撐爆輸入框

給工程師

完整 API 見 Element Plus TreeSelect 文件。 本站規範優先於 EP 文件中的視覺建議。