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

同樣都是選擇組件，你可能會(huì)想：

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

本文就來詳細(xì)分析下這三者的區(qū)別和聯(lián)系，幫助你做好應(yīng)用。

一、級聯(lián)選項(xiàng) Cascader

級聯(lián)選項(xiàng)是一種選擇控件，選項(xiàng)以分組菜單的結(jié)構(gòu)呈現(xiàn)：

其用法特征是：

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

二、樹形選框 Tree Select

樹形選框也是一種選擇控件，選項(xiàng)內(nèi)容以樹形結(jié)構(gòu)呈現(xiàn)：

其用法特征是：

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

三、穿梭框 Transfer

還是一種選擇控件，以雙列列表的結(jié)構(gòu)呈現(xiàn)。

其特點(diǎn)是：

其用法特點(diǎn)是：

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

四、使用建議 Advice

1. 關(guān)于使用場景

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

2. 彼此之間的關(guān)聯(lián)

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

你可以從以下幾點(diǎn)條件、結(jié)合你的業(yè)務(wù)需求來綜合評估到底選擇哪個(gè)組件：

1. 選項(xiàng)的層級數(shù)量。
2. 選項(xiàng)的總數(shù)量。
3. 用戶對于選項(xiàng)及其層級所建立的認(rèn)知模型和心理預(yù)期。
4. 用戶通常會(huì)如何選擇選項(xiàng)（比如是否經(jīng)常會(huì)全選第一層級）等等。

另外，穿梭框 Transfer 中的選項(xiàng)內(nèi)容也可使用樹形選擇 Tree Select 來展示，能夠讓內(nèi)容結(jié)構(gòu)呈現(xiàn)更加清晰和有序。

B 端設(shè)計(jì)系統(tǒng)和組件設(shè)計(jì)是值得每一位設(shè)計(jì)師都深入研究的課題。