QSelect 元件有兩種選擇類型：單選或多選。此元件會開啟一個選單，用於選擇列表和操作。篩選器也可用於較長的列表。
如果您正在尋找下拉「按鈕」而不是「輸入」，請改用 按鈕下拉選單。
設計
概觀
警告
您的 QSelect 只能使用主要設計之一 (filled、outlined、standout、borderless)。您不能使用多個，因為它們是互斥的。
裝飾器
色彩
可清除
作為輔助工具，您可以使用 clearable 屬性，讓使用者可以通過附加的圖示將模型重置為 null。以下範例中的第二個 QSelect 等同於使用 clearable。
停用與唯讀
具有「submit」類型的 QBtn 插槽
警告
當在 QField、QInput 或 QSelect 的「before」、「after」、「prepend」或「append」插槽之一中放置類型為「submit」的 QBtn 時，您也應該在相關的 QBtn 上新增一個 @click 監聽器。此監聽器應呼叫提交表單的方法。此類插槽中的所有「click」事件都不會傳播到其父元素。
選單轉場效果
警告
請注意，當使用 options-cover 屬性時，轉場效果不起作用。
以下範例展示了一些轉場效果。如需完整的可用轉場效果列表，請前往 轉場效果。
選項列表顯示模式
預設情況下，QSelect 在桌面上將選項列表顯示為選單，在行動裝置上則顯示為對話框。您可以使用 behavior 屬性強制執行一種行為。
警告
請注意，在 iOS 上，選單行為可能會產生問題，尤其是在與 use-input 屬性結合使用時。您可以使用條件式 behavior 屬性，例如 :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"，僅在 iOS 上使用對話框模式。
模型
警告
單選的模型可以是任何類型 (字串、物件，…)，而多選的模型必須是陣列。
模型內容可能會受到 emit-value 屬性的影響，您將在下方的「選項」章節中學習到。
選項
選項類型
影響模型
當使用 emit-value 時，模型會變成指定所選選項的已確定 value。預設為發射整個選項。僅當選項為物件形式時，使用它才有意義。
當使用 map-options 時，模型可以僅包含 value，並且它將根據選項進行映射以確定其標籤。這會涉及效能損失，因此僅在絕對必要時才使用它。例如，如果模型包含整個物件 (因此包含標籤屬性)，則不需要它。
自訂屬性名稱
預設情況下，QSelect 會查看選項陣列物件中每個選項的 label、value、disable 和 sanitize 屬性。但您可以覆寫這些屬性
警告
如果您使用函數來自訂屬性，請務必檢查選項是否為 null。這些函數既用於列表中的選項，也用於選定的選項。
自訂選單選項
警告
選項列表是使用虛擬滾動渲染的，因此如果您為一個選項渲染多個元素，則必須在除第一個元素之外的所有元素上設定 q-virtual-scroll--with-prev 類別。
這是另一個範例，我們在每個選項中新增了一個 QToggle。可能性是無限的。
預設情況下，當沒有選項時，選單不會出現。但是您可以自訂此情境並指定選單應顯示的內容。
延遲載入
以下範例簡要說明了如何使用選項的延遲載入。這表示，以及許多其他事項，首次渲染時不需要 options 屬性。
當滾動條到達底部時，您可以動態載入新選項
覆蓋模式
停用 TAB 選擇
顯示值
篩選與自動完成
具有「use-input」的原生屬性
所有在 QSelect 上設定但不在 API 屬性列表中的屬性，都會被傳遞到用於過濾/自動完成/新增值的原生 input 欄位 (請先查看 use-input 屬性描述以了解其作用)。一些範例：autocomplete、placeholder。
更多資訊：原生 input 屬性。
建立新值
提示
以下僅是一些範例，引導您開始建立自己的 QSelect 行為。這並非 QSelect 提供的所有可能性的詳盡列表。
將此功能與 use-input 屬性一起使用是有意義的。
為了啟用建立新值的功能，您需要指定 new-value-mode 屬性和/或監聽 @new-value 事件。如果您同時使用兩者，那麼監聽 @new-value 的目的僅在於在您的自訂情境中覆蓋 new-value-mode。
new-value-mode 屬性
new-value-mode 屬性值指定了值的添加方式：add (添加值，即使重複)，add-unique (僅在不重複時添加) 或 toggle (如果值尚未在模型中則添加，否則移除它)。
通過使用此屬性，您不需要同時監聽 @new-value 事件，除非您有一些特定的情境需要覆蓋此行為。
@new-value 事件
@new-value 事件在發射時會帶有要添加的值和一個 done 回調函數。done 回調函數有兩個可選參數
- 要添加的值
- 行為 (與
new-value-mode屬性的值相同，並且當指定時，它會覆蓋該屬性 - 如果有使用) - 預設行為 (如果沒有使用new-value-mode) 是添加值，即使它會是重複的。
調用不帶參數的 done() 只會清空輸入框的值，而不會以任何方式修改模型。
使用選單和過濾
過濾並將新值添加到選單
過濾新值 (在以下範例中，要添加的值需要至少 3 個字元才能通過)，並且不添加到選單
從輸入產生多個值
清理
預設情況下，所有選項 (包括選定的選項) 都會被清理。這表示以 HTML 格式顯示它們的功能被禁用。但是，如果您需要在選項中使用 HTML 並且信任其內容，則有幾種方法可以做到這一點。
您可以通過以下方式強制選單選項使用 HTML 格式
- 將受信任選項的
html鍵設定為true(針對特定的受信任選項) - 或通過設定 QSelect 的
options-html屬性 (針對所有選項)
如果符合以下條件，QSelect 的顯示值將以 HTML 格式顯示
- 設定了 QSelect 的
display-value-html屬性 - 或者您沒有使用
display-value並且- 設定了 QSelect 的
options-html屬性 - 任何選定的選項的
html鍵設定為true
- 設定了 QSelect 的
警告
如果您使用 selected 或 selected-item 插槽，則您有責任清理顯示值。display-value-html 屬性將不適用。
渲染效能
渲染效能不會受到選項數量的太大影響，除非在大型資料集上使用 map-options。請注意，無限滾動功能會在使用者滾動列表時渲染額外的選項。
提示
- (Composition API) 為了在使用大量選項時獲得最佳效能，請勿使用 ref()/computed()/reactive()/等包裹您傳遞到
options屬性中的陣列。這允許 Vue 跳過使列表對變更做出「響應」。 - (Options API) 為了在使用大量選項時獲得最佳效能，請使用
Object.freeze(items)凍結您傳遞到options屬性中的陣列。這允許 Vue 跳過使列表對變更做出「響應」。
鍵盤導航
當 QSelect 獲得焦點時
- 按下 ENTER、ARROW DOWN (或 SPACE，如果未設定
use-input) 將會打開選項列表 - 如果設定了
use-chips- 按下 SHIFT + TAB 將會在 QChips 中向後導航 (如果已選取 QChip，則 TAB 將會在 QChips 中向前導航)
- 當選取 QChip 時按下 ENTER 將會從選取中移除該選項
- 按下 BACKSPACE 將會從選取中移除最後一個選項 (當設定
use-input時，輸入框應為空)
- 當設定
clearable時按下 BACKSPACE 則- 它會清除單選的模型 (使用
null值) - 它會移除多選的最後添加的值
- 它會清除單選的模型 (使用
- 按下 TAB (或 SHIFT + TAB，如果未設定
use-chips或已選取第一個 QChip) 將會導航到頁面上下一個或上一個可獲得焦點的元素 - 如果未設定
use-input，則輸入文字 (0 - 9 或 A - Z) 將會- 建立一個搜尋緩衝區 (如果 1.5 秒內沒有輸入新按鍵，則會重置)，該緩衝區將用於在選項標籤中搜尋
- 如果緩衝區中的第一個按鍵被多次輸入，則選取下一個以該字母開頭的選項 (在目前焦點選項之後)
- 選取下一個 (從目前焦點選項開始) 與輸入文字匹配的選項 (匹配是模糊的 - 選項標籤應以第一個字母開頭並包含所有字母)
當選項列表打開時
- 按下 ARROW UP 或 ARROW DOWN 將會在選項列表中向上或向下導航
- 按下 PAGE UP 或 PAGE DOWN 將會在選項列表中向上或向下翻頁
- 按下 HOME 或 END 將會導航到選項列表的開頭或結尾 (僅當您未使用
use-input，或輸入框為空時) - 當使用方向鍵導航時，導航將在到達列表的開頭或結尾時循環
- 當在列表中選取選項時，按下 ENTER (或 SPACE，當未設定
use-input時，或 TAB，當未設定multiple和disable-tab-selection時) 將會- 如果未設定
multiple和disable-tab-selection，則選取選項並關閉選項列表 - 如果設定了
multiple，則切換選項
- 如果未設定
原生表單提交
當處理具有 action 和 method 的原生表單時 (例如，當將 Quasar 與 ASP.NET 控制器一起使用時)，您需要在 QSelect 上指定 name 屬性，否則 formData 將不會包含它 (如果應該包含) - 所有值都會轉換為字串 (原生行為，因此請勿使用 Object 值)