Tree 樹形控件

展示與操作有層級的資料。使用 Element Plus 的 el-tree。

設計準則

• 和 TreeSelect 的分工:表單裡選一個值用 TreeSelect;瀏覽、管理整棵結構(側欄分類、權限配置)用 Tree
• 層級 3 層以內;預設展開到使用者最常操作的那一層
• 多選配置(權限、部門)用 show-checkbox,半選狀態代表「部分子項已選」
• 節點多於一屏要給篩選框
• 自訂節點內容:主資訊靠左、次要資訊/操作靠右(操作建議滑過才出現)

基本用法

三層結構(公司 → 部門 → 組)是建議的深度上限:

loading

可勾選

loading

自訂節點內容

loading

節點篩選

loading

Do / Don't

✅ Do	❌ Don't
管理整棵結構才用 Tree	表單選值也用(用 TreeSelect)
預設展開常用層級	全收合讓人一層層點
超過一屏給篩選	讓人捲 200 個節點

給工程師

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