本篇文章將闡述級聯選擇、樹形選框、穿梭框這三種組件的基本內容和用法，進一步分析這三種組件的區別，希望能對你提供一些幫助。

同樣都是選擇組件，你可能會想：

• 級聯選擇（Cascader）是否支持多選？
• 樹形選框（Tree Select）可以怎么用？
• 穿梭框（Transfer）和前兩者的區別是什么？

本文就來詳細分析下這三者的區別和聯系，幫助你做好應用。

一、級聯選項 Cascader

級聯選項是一種選擇控件，選項以分組菜單的結構呈現：

其用法特征是：

1. 通過分組多列進行展示，常用于單選，也可支持多選。
2. 選項需要有一定的邏輯順序，從集合到單項進行選擇，且最好是符合用戶認知模型的集合方式，例如“省、市、區”。
3. 整體需包含兩個及兩個以上的層級。
4. 與輸入框連用，以下拉菜單承載。

二、樹形選框 Tree Select

樹形選框也是一種選擇控件，選項內容以樹形結構呈現：

其用法特征是：

1. 單一列表的樹形結構，常用于多選，也可支持單選。
2. 通常適用于選項有一定邏輯順序的選擇場景，體現選項之間的關聯性和層級性，比如內容間是“上下級關系”或“權限的包含關系”。
3. 整體需包含兩個及兩個以上的層級，第一層級默認收起，避免選項內容過多致使用戶需要不停向下滾動操作。
4. 在頁面中占據的空間較小，可與輸入框連用，以下拉菜單承載。

三、穿梭框 Transfer

還是一種選擇控件，以雙列列表的結構呈現。

其特點是：

其用法特點是：

1. 在兩欄中選中并移動元素完成選擇操作，常用于多選，也支持單選。
2. 兩列選項列表中：一列為源列表，一列最終目的列表，即用戶可以同時看到選項的來源和歸宿。因此左右兩列的選項結構應盡量保持一致以便于用戶比較和理解。
3. 強調內容是“移走”而不是“復制”。比如可以用于以下的操作場景：某個權限從 A 手中轉到 B 手中（也即當 B 擁有該權限時，A 就不再擁有該權限）。
4. 占用更多空間，可以展示關于選項內容的更多詳細信息、包含更多的層級結構，常用彈窗或新頁面來承載。

四、使用建議 Advice

1. 關于使用場景

• 級聯選擇 Cascader：常用于單選。
• 樹形選框 Tree Select：常用于多選。
• 穿梭框 Transfer：常用于多選。

2. 彼此之間的關聯

對于功能類似的級聯選擇 Cascader 和樹形選框 Tree Select，在一個表單中盡量只選擇一種組件樣式。

你可以從以下幾點條件、結合你的業務需求來綜合評估到底選擇哪個組件：

1. 選項的層級數量。
2. 選項的總數量。
3. 用戶對于選項及其層級所建立的認知模型和心理預期。
4. 用戶通常會如何選擇選項（比如是否經常會全選第一層級）等等。

另外，穿梭框 Transfer 中的選項內容也可使用樹形選擇 Tree Select 來展示，能夠讓內容結構呈現更加清晰和有序。

B 端設計系統和組件設計是值得每一位設計師都深入研究的課題。