写点什么

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

作者:蒋川
  • 2022 年 2 月 26 日
  • 本文字数:1817 字

    阅读完需:约 6 分钟

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

本文首发:《最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云


单选 / 下拉 / 多选(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 小时,欢迎免费试用卡拉云

7. 一起交流


蒋川,卡拉云联合创始人,B 端数据开发。


如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan


扩展阅读:


发布于: 刚刚阅读数: 2
用户头像

蒋川

关注

我的微信:HiJiangChuan 2020.09.08 加入

卡拉云 CMO 卡拉云是一套帮助后端程序员搭建企业内部工具的系统,欢迎试用 www.kalacloud.com

评论

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