本文首發：《最好用的 5 個 Vue select 單選多選下拉組件 - 卡拉雲》
單選 / 下拉 / 多選（select）組件在搭建 Vue 的 app 中特別常用，Vue select 除了用鼠標點選外，還可以有更多樣的功能，比如搜索過濾，樹狀結構，tab 分組，按組選擇等。這些高級功能都可以在第三方組件中找到，本文記錄了我自己使用多年最好用的 5 款 Vue select 組件，每一款都經過我實際測試，推薦給大家。
如果你正在搭建後台管理工具，又不想處理前端問題，推薦使用卡拉雲，卡拉雲是新一代低代碼開發工具，可一鍵接入常見數據庫及 API ，無需懂前端，僅需拖拽即可快速搭建屬於你自己的後台管理工具，一週工作量縮減至一天，詳見本文文末。
基礎款多選組件
多選組件最簡單的寫法，只需要將屬性添加到本機 <select> 裏即可創建功能最簡單的多選組件。然後你 app 的用户可以按着 Ctrl 鍵，來進行單選或多選。
<body>
<h3>卡拉雲 select 選擇器組件測評</h3>
</body>
<select name="name" id="demo" multiple>
<option value="kalacloud"> 卡拉雲 </option>
<option value="lowcode"> 低代碼開發工具 </option>
<option value="com"> kalacloud.com </option>
</select>
是不是稍微有點簡陋，功能也非常單一。好在 Vue.js 裏有非常多第三方組件庫供我們選擇。
接下來介紹 5 款我自己常用的 Vue Select 第三方組件，它們各有特色，希望能幫你找到合適你的選擇器
- Vue-multiselect - 單選多選、搜索過濾、UI 漂亮
- Multiple-Select - 分組多選、按組全選、輕盈好用
- Vue Treeselect - 大數據量依然輕鬆處理
- Vue Tree - 樹狀結構選擇器、過濾搜索、分組全選
- Vue multi select - 分組搜索、tab 分頁、分組全選
1. Vue-multiselect - 單選多選、搜索過濾、UI 漂亮
Vue-multiselect 的 UI 設計相當漂亮，同時支持過濾搜索、鍵盤快捷鍵，它是我最喜歡用的 Vue select 組件之一，放在第一個介紹。
Vue-multiselect 更多功能：
- 沒有依賴
- 單選、多選、標記
- 自定義選項模板
- 下拉菜單
- 過濾及搜索建議
- 基本組件和對自定義組件的支持
擴展閲讀：《頂級好用的 5 款 Vue table 表格組件測評與推薦》
2.Multiple-Select - 分組多選、按組全選、輕盈好用
Multiple-Select 是一款簡潔的多選框組件，支持 Vue 。雖然 UI 簡單，但整體輕盈，功能有十分豐富，默認顯示覆選框，能夠對多選項進行分組，支持在一行中顯示多個選項，按組全選。
擴展閲讀：《最好用的 7 款 Vue 3 富文本編輯器》
3. Vue Treeselect - 大數據量依然輕鬆處理
vue-treeselect 是一個多選組件，它的好，需要你 setup 起來自己用上才能感覺到，不論數據量多大，它都能輕巧的進行過濾搜索，不論數據嵌套有多深，加載毫無延遲，點擊秒開。支持鍵盤快捷鍵，豐富的選項可高度定製。
擴展閲讀：《手把手教你Vue3+Node.js+Expres+MySQL環境搭建》
4. Vue Tree - 樹狀結構選擇器、過濾搜索、分組全選
Vue Tree 是國人開發的樹狀結構選擇器，支持多選、分組全選、過濾搜索等。它有三種模式，純搜索選擇，純樹裝結構選擇以及搜索與樹狀結合的選擇方式。
擴展閲讀：《Vue Router 手把手教你搭 Vue3 路由》
5. Vue multi select - 分組搜索、tab 分頁、分組全選
Vue multi select 是一款輕量級單選多選組件，支持鍵盤快捷鍵。它和其他幾款選擇組件相比多了 tab 分頁功能，在某些場景下，非常好用。Vue multi select 代碼簡潔，擴展性強，可根據你的應用場景按需定製。
擴展閲讀：《最好用的 7 款 Vue admin 後台管理系統測評》
6. 選擇器總結
本文推薦了我自己使用多年的 5 款最好用的 Vue select 選擇器，這其中一定有一款適合你。這些第三方組件已經幫我們節省大量開發時間，如果還想更進一步，推薦使用卡拉雲，卡拉雲內置選擇器和過濾搜索功能，無需懂任何前端，僅需拖拽即可快速生成。
卡拉雲是新一代低代碼開發工具，免安裝部署，可一鍵接入包括 MySQL 在內的常見數據庫及 API。可根據自己的工作流，定製開發。無需繁瑣的前端開發，只需要簡單拖拽，即可快速搭建企業內部工具。原來三天的開發工作量，使用卡拉雲後可縮減至 1 小時，歡迎免費試用卡拉雲。
擴展閲讀：
- 最好的 5 款翻譯 API 接口對比測評
- 最好用的七大頂級 API 接口測試工具
- 最好用的 5 款 React 富文本編輯器
- Postman 使用教程 - 手把手教你 API 接口測試
- 最好的 6 個免費天氣 API 接口對比測評
- 如何在 Vue 中導出數據至 Excel 表格
