最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云
本文首发：《最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云》
单选 / 下拉 / 多选（select）组件在搭建 Vue 的 app 中特别常用，Vue select 除了用鼠标点选外，还可以有更多样的功能，比如搜索过滤，树状结构，tab 分组，按组选择等。这些高级功能都可以在第三方组件中找到，本文记录了我自己使用多年最好用的 5 款 Vue select 组件，每一款都经过我实际测试，推荐给大家。
如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。
基础款多选组件
多选组件最简单的写法，只需要将属性添加到本机 <select> 里即可创建功能最简单的多选组件。然后你 app 的用户可以按着 Ctrl 键，来进行单选或多选。
是不是稍微有点简陋，功能也非常单一。好在 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 小时，欢迎免费试用卡拉云。
7. 一起交流
蒋川，卡拉云联合创始人，B 端数据开发。
如果你有任何问题，欢迎添加微信一起交流。我的微信 HiJiangChuan
扩展阅读：
版权声明: 本文为 InfoQ 作者【蒋川】的原创文章。
原文链接:【http://xie.infoq.cn/article/dd4866377acb54d7fff8402e2】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
我的微信：HiJiangChuan 2020.09.08 加入
卡拉云 CMO 卡拉云是一套帮助后端程序员搭建企业内部工具的系统，欢迎试用 www.kalacloud.com
评论