关于vue.js:顶级好用的-5-款-Vue-table-表格组件测评与推荐

4次阅读

共计 2771 个字符,预计需要花费 7 分钟才能阅读完成。

本文首发:《顶级好用的 5 款 Vue table 表格组件测评与举荐 – 卡拉云》

Vue table 表格组件作为绝大多数我的项目须要内嵌的组件,堪称非常重要。表格看起来虽简略,实则坑很深,像搜寻、排序、分页、有限加载等性能看起来很好实现,其实相当繁琐。抉择适宜本人我的项目利用场景的 Vue table,会让我的项目开发事倍功半。在抉择之前,咱们要对市面上支流的 Vue table 表格组件有个全面理解,晓得他们的优缺点,再依据本人我的项目的需要,有针对性的抉择。

我试用了国内外支流 table 表格组件,测了一遍,筛掉长期不更新,bug 显著,社区活跃度低,性能繁多的 table 表格组件,把最好、最有特点的 5 款 Vue table 挑出来,分享给大家。这些 table 组件各有各的特点,有些性能多样,但整体很重;有些性能简略,但外围性能突出;有些堪比在线版 Excel,再简单的需要也可满足。心愿我的测评能够帮忙你选到适合你需要的 table 组件。

另外,这个世界曾经悄悄发生变化,当初基本无需写任何前端代码,间接应用卡拉云 —— 新一代低代码开发工具帮你搭建后盾零碎,其内置欠缺的表格组件零碎,无需调试,拖拽即用。原来三天的工作量,当初 1 小时搞定,谁用谁晓得,用上早上班,详见本文文末。

本文测评的 5 款 Vue table 表格组件

  • Vue easytable – 性能恰到好处 无学习老本 上手就用
  • Vue good table – UI 清爽 性能直给 适宜小我的项目
  • Vxe table – 宝藏级 table 组件 高级性能低调好用 保护频率高
  • tabulator – 元老级 table 组件 高级性能平民化
  • AG Grid – 媲美 Excel 的 Table 组件 能想到的简单性能它都能做到
  • 卡拉云 – 新一代低代码开发工具,无需任何前端技术,内置表格组件,简略拖拽即可疾速搭建后盾工具

一. Vue easytable – 性能恰到好处 无学习老本 上手就用

早些年我在应用 Vue 开发后盾是援用过 Vue easytable 组件解决过公司的销售数据,过后感觉根底排序和过滤设计的很正当,那时候 easytable 的 UI 有点像 excel 97,2021 年初作者对它进行了一次重大重构降级,UI 也进行了大更新,当初丑陋多了。

easytable 基于 Vue2 开发的表格组件,表格尺寸能够随便变动,既能够拖动变大变小,也能够固定列和表头,当然表格做了很好的浏览器窗框自适应。筛选类的性能,比方单选、多选、过滤和排序,做的很直观,毫无学习老本,上手就用。

扩大浏览:《最好用的 7 款 Vue admin 后盾管理系统》

二. Vue good table – UI 清爽 性能直给 适宜小我的项目

Vue good table 几乎是疾速上线党的福音,所有性能都赤裸裸的摊在外表,npm 简略装置,而后扔给 good table 数据,间接就映射到表格里了,每个列一个搜寻框,没那么多抉择,间接搜间接就 filter 数据了。

good table 看似性能简略,但所有表格的根底性能都它全都有。如果你仅仅是展现数据,简略的搜寻和排序,那么选它就对了。另外,基于 Vue3 的 Vue good table 版,曾经公布。

三. Vxe table – 宝藏级 table 组件 高级性能低调好用 保护频率高

Vxe table 一个基于 Vue(现已反对 Vue3)的 PC 端全功能表格组件,满足你对 table 绝大多数需要,可与任意组件库完满兼容。我之前做过一个广告数据监测的我的项目,要展现的数据量较大,配 element 的 table 组件可把我折腾坏了,起初找了挺多开源表格,有各种各样的问题,最初锁定了 Vxe table,用上才发现它是如此弱小。

Vxe-table 虚构滚动、懒加载、快捷菜单、数据校验、树形构造、打印导出、表单渲染、数据分页、虚构列表、模态窗口、自定义模板、渲染器,每一个性能做细了都不容易。

作者对 Vxe-table 的保护频率很高,从 2019 年到当初曾经发了 4 个大版本,最新的 4.0 曾经反对 Vue3。对于它后续降级及反对能够比拟释怀了。

扩大浏览:《手把手教你 Vue3+Node.js+Expres+MySQL 环境搭建》

四. Tabulator – 元老级 table 组件 高级性能平民化

Tabulator 可算是 table 组件的元老,从 2015 年公布第一个版本开始,高频迭代到当初,曾经十分成熟,它基于 jQuery UI,可间接加载 JSON、数组、AJAX 数据到表格上。

tabulator 刚刚公布了 5.0,历经 4 代冗余的代码在 5.0 中被整个重构,新版中引入了很多新个性:

扩大浏览:《Axios 教程:Vue + Axios 装置及实战 – 手把手教你搭建加密币实时价格看板》

五. AG Grid – 媲美 Excel 的 Table 组件 你能想到的简单性能它都能做到

AG Grid 表格组件性能卓越,功能强大,没有第三方依赖,可与 Vue 在哪的所有支流 JS 框架集成。

它的官网上赫然写着「The Best JavaScript Grid in the World」,这可不是吹牛,AG Grid 相对做到了业界顶级,可与 Excel 一战。它的统计图表性能同时合并图标和表格的重量级性能,图表即表格,表格即图表,单只是想想就晓得这个性能有多简单与多弱小。

AG Grid 每月下载竟然高达超过 60 万次,这不是其余表格组件能比的量,世界五百强企业有一半在应用它。而且,它还有社区版(免费版)提供大家应用,你说棒不棒。

扩大浏览:《最好用的 7 款 Vue 3 富文本编辑器》

六. Vue table 组件总结及卡拉云

本文介绍了我本人用过的 5 款 Vue table 表格组件,大家能够依据本人工作中的理论场景来筛选适合最适宜本人的组件。

如果你的后端曾经搭建,数据曾经筹备好,但又对前端不相熟,举荐应用卡拉云,真正开箱即用,无需写任何前端代码,仅需拖拽组件,即可生成 table 组件,你想要的根底性能它都能满足。

下图为卡拉云用户依据本人状况,搭建的广告投放监测零碎。其中的表格组件间接把从后端调回的 JSON 数据映射到拖放生成的表格组件上,排序、过滤、搜寻、分页、表格内显示图片,都曾经帮你配置齐全,你只须要点点鼠标即可。是不是很棒,点这里立刻试用 卡拉云。

卡拉云是新一代低代码开发工具,免装置部署,可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流,定制开发。无需繁琐的前端开发,只须要简略拖拽,即可疾速搭建企业外部工具。原来三天的开发工作量,应用卡拉云后可缩减至 1 小时,欢送收费试用卡拉云。

七. 本文作者

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

如果你有任何问题,欢送增加微信一起交换。我的微 HiJiangChuan

扩大浏览:

  • 最好的 5 款翻译 API 接口比照测评
  • 最好用的七大顶级 API 接口测试工具
  • 最好用的 5 款 React 富文本编辑器
  • Postman 应用教程 – 手把手教你 API 接口测试
  • 最好的 6 个收费天气 API 接口比照测评
  • PAW 应用教程 – 手把手教你 API 接口测试
正文完
 0