最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云

HiJiangChuan · · 1434 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

![最好用的 7 款 Vue admin 后台管理系统测评](https://kalacloud.com/static/f0d2019e12813fcdb5b3554a6a79f238/ef245/head.jpg) 本文首发:《[最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云](https://kalacloud.com/blog/best-vue-multiple-select/)》 单选 / 下拉 / 多选(select)组件在搭建 Vue 的 app 中特别常用,Vue select 除了用鼠标点选外,还可以有更多样的功能,比如搜索过滤,树状结构,tab 分组,按组选择等。这些高级功能都可以在第三方组件中找到,本文记录了我自己使用多年最好用的 5 款 Vue select 组件,每一款都经过我实际测试,推荐给大家。 如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用[卡拉云](https://kalacloud.com/),卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。 ## 基础款多选组件 多选组件最简单的写法,只需要将属性添加到本机 `<select>` 里即可创建功能最简单的多选组件。然后你 app 的用户可以按着 Ctrl 键,来进行单选或多选。 ![select-basic](https://kalacloud.com/8f0aa281b74e07efd7b31015cfde9a93/01-select-basic.gif) 是不是稍微有点简陋,功能也非常单一。好在 Vue.js 里有非常多第三方组件库供我们选择。 接下来介绍 5 款我自己常用的 Vue Select 第三方组件,它们各有特色,希望能帮你找到合适你的选择器 - Vue-multiselect - 单选多选、搜索过滤、UI 漂亮 - Multiple-Select - 分组多选、按组全选、轻盈好用 - Vue Treeselect - 大数据量依然轻松处理 - Vue Tree - 树状结构选择器、过滤搜索、分组全选 - Vue multi select - 分组搜索、tab 分页、分组全选 ## 1. Vue-multiselect - 单选多选、搜索过滤、UI 漂亮 ![vue-multiselect](https://kalacloud.com/static/4a6bcdaf2efa74217f2513f5a00b5788/ac614/02-01-vue-multiselect.jpg) [Vue-multiselect](https://vue-multiselect.js.org/) 的 UI 设计相当漂亮,同时支持过滤搜索、键盘快捷键,它是我最喜欢用的 Vue select 组件之一,放在第一个介绍。 ![vue-multiselect](https://kalacloud.com/c49473e3e19306ae41424e5779168d36/02-02-vue-multiselect.gif) [Vue-multiselect](https://vue-multiselect.js.org/) 更多功能: - 没有依赖 - 单选、多选、标记 - 自定义选项模板 - 下拉菜单 - 过滤及搜索建议 - 基本组件和对自定义组件的支持 扩展阅读:《[顶级好用的 5 款 Vue table 表格组件测评与推荐](https://kalacloud.com/blog/best-vue-data-table-grid/)》 ## 2.Multiple-Select - 分组多选、按组全选、轻盈好用 ![multiple-select](https://kalacloud.com/static/403eb072ad5fd6362ff29dacee36ecfb/11438/03-multiple-select.jpg) [Multiple-Select](https://github.com/wenzhixin/multiple-select) 是一款简洁的多选框组件,支持 Vue 。虽然 UI 简单,但整体轻盈,功能有十分丰富,默认显示复选框,能够对多选项进行分组,支持在一行中显示多个选项,按组全选。 扩展阅读:《[最好用的 7 款 Vue 3 富文本编辑器](https://kalacloud.com/blog/vue-richtext-editor/)》 ## 3. Vue Treeselect - 大数据量依然轻松处理 ![multi-select-tree](https://kalacloud.com/static/45b08f804dab5f5784efbec280d761c2/11438/04-multi-select-tree.jpg) [vue-treeselect](https://github.com/riophae/vue-treeselect) 是一个多选组件,它的好,需要你 setup 起来自己用上才能感觉到,不论数据量多大,它都能轻巧的进行过滤搜索,不论数据嵌套有多深,加载毫无延迟,点击秒开。支持键盘快捷键,丰富的选项可高度定制。 扩展阅读:《[手把手教你Vue3+Node.js+Expres+MySQL环境搭建](https://kalacloud.com/blog/vue-js-node-js-express-mysql-crud-example/)》 ## 4. Vue Tree - 树状结构选择器、过滤搜索、分组全选 ![vue-tree](https://kalacloud.com/static/a83d1dae4ff0440640efdf9991ad34da/ac614/05-vue-tree.jpg) [Vue Tree](https://github.com/halower/vue-tree) 是国人开发的树状结构选择器,支持多选、分组全选、过滤搜索等。它有三种模式,纯搜索选择,纯树装结构选择以及搜索与树状结合的选择方式。 扩展阅读:《[Vue Router 手把手教你搭 Vue3 路由](https://kalacloud.com/blog/vue-router-tutorial-for-vue-3/)》 ## 5. Vue multi select - 分组搜索、tab 分页、分组全选 ![vue-multi-select](https://kalacloud.com/static/25ae699df682f154c7f050dc9b81b8ba/e9b2c/06-vue-multi-select.jpg) [Vue multi select](https://github.com/IneoO/vue-multi-select) 是一款轻量级单选多选组件,支持键盘快捷键。它和其他几款选择组件相比多了 tab 分页功能,在某些场景下,非常好用。Vue multi select 代码简洁,扩展性强,可根据你的应用场景按需定制。 扩展阅读:《[最好用的 7 款 Vue admin 后台管理系统测评](https://kalacloud.com/blog/best-vue-js-admin-dashboard/)》 ## 6. 选择器总结 本文推荐了我自己使用多年的 5 款最好用的 Vue select 选择器,这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间,如果还想更进一步,推荐使用[卡拉云](https://kalacloud.com/),卡拉云内置选择器和过滤搜索功能,无需懂任何前端,仅需拖拽即可快速生成。 ![07-kalacloud](https://kalacloud.com/static/ea6161f5d247cb30720184cead1211a9/6c27d/07-kalacloud.jpg) 卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。**原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费[试用卡拉云](https://kalacloud.com/)。** ## 7. 一起交流 ![wechat-jiangchuan](https://kalacloud.com/static/866ca0d4c8274bfc3a670eadf4e5de9f/ef245/wechat-jiangchuan.jpg) 蒋川,卡拉云联合创始人,B 端数据开发。 如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan 扩展阅读: - [最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/) - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/) - [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/) - [如何在 Vue 中导出数据至 Excel 表格](https://kalacloud.com/blog/vue-export-json-to-excel-csv/)

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1434 次点击  
加入收藏 微博
1 回复  |  直到 2022-02-28 16:28:10
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传