vue大数据表格解决方案的比较
前言
近些年公司一直采用vue2.x
+Element UI
进行开发,对于Element UI
,由于起步较早,相关的生态一直比较成熟,各种问题在某度上也能找到比较完美的解决方案,最最重要的一点是bug也比较少。
凡是总有个但是:),但是对于Element UI
中的Table
组件,我个人而言其实不太喜欢的,一是大数据情况下,Table
性能堪忧,二是Table
组件如果需要展示多行表尾,那是相当的麻烦。尤其是第一点,我相信做报表开发的各位,可能会有比较急迫的需求。
下面针对我个人找到的支持大数据的UI框架进行简单的比较。
大数据UI方案的比较
1. Ant Design Vue
对于React
版本的AntDesign
,Table
组件原生支持虚拟滚动这一特性:https://ant-design.gitee.io/components/table-cn/#components-table-demo-virtual-list。官方文档里的说明是:
通过
react-window
引入虚拟滚动方案,实现 100000 条数据的高性能表格。
而对于Vue
版本的AntDesign
(文档:https://www.antdv.com/docs/vue/introduce-cn),Table
组件功能则比较简陋,并不支持虚拟滚动。
2. Surely Vue
在Ant Design Vue
官方文档上,可以看到一个Surely Vue
的推广链接(https://www.surely.cool/),该UI框架上注明是支持百万级别的数据展示。
流畅渲染百万级别数据
横向纵向虚拟滚动
最省心的优化
对于我个人来说,Surely Vue
的Api设计和我当前项目的需求挺符合的,维护人员也有大厂的背景,一开始我是挺倾向于Surely Vue
的。
但是由于目前项目主要采用Vue 2.x
开发,而Surely Vue
,目前仅支持Vue 3.x
版本,并且无法承诺何时添加对Vue 2.x
的支持。另外Surely Vue
需要授权才能使用,这一点对于小公司来说却是一笔不小的开支,遂放弃。
3. umy-ui
官网链接:http://www.umyui.com/。一个典型的个人开发者开发的UI,说是UI,其实目前只开发了表格组件和按钮组件。并且表格组件只是在Element-UI
的基础上做了优化:
umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。
对于该UI,我想说的是维护人员的出发点是好的,只是功能过于简陋,并且看Git(https://github.com/u-leo/umy-ui)上的更新记录,似乎已经放弃维护了。。。
对于其他一些个人开发的支持大数据表格的UI,似乎都有这样的问题,不展开来说明。
4. vxe-table
官网地址:https://vxetable.cn/。
vxe-table
也是几个大牛用爱发电的项目,在码云Gitee上被评为GVP,在Git上也有4.4k的Star,在npm上每个月有55k下载量,算是比较高的热度了。
文档中对于大数据方面的描述是:
虚拟滚动(最大可以支撑 5w 列、30w 行)
vxe-table
名称并不带有xxx-ui,且包含了比较常用的组件,像Form
、Input
、Select
、Checkbox
等等组件,个人感觉是一个完成度比较高的一个前端框架。
该框架的特点是除了提供一些常用的Api外,另外原生支持一些其他框架中比较少见的功能,比如导入导出、打印、表格筛选等等功能。
目前vxe-table
主要维护两个版本3.x
以及4.x
,其中3.x
主要面相于Vue 2.6+
,4.x
主要面相于Vue 3.x
。
对于普通的开发者来说,vxe-table
基本上能满足大部分需求,另外对于一些深度使用的用户,vxe-table
也通过提供pro版付费插件的形式,额外提供一些比较高级的功能。
5. Ag Grid
官网地址:https://www.ag-grid.com/。
Ag Grid
是一个非常优秀且漂亮的表格组件,是市面上难得的同时支持Vue
、React
、Angular
三大框架的。Ag Grid
在Git上拥有8K的Star和1.4K的Fork,
Ag Grid
相对于前面几个框架,可以说是降维打击的存在,其完成度非常高,几乎能满足开发者对于表格的所有需求。
Ag Grid
提供了两个版本:社区版ag-grid-community
和企业版ag-grid-enterprise
。社区版提供了表格的基础功能,企业版提供表格的高级拓展功能。
6. Antv S2
(2022/03/04补充)
官网地址:https://antv.vision/zh
Antv
起初是蚂蚁金服旗下的数据可视化解决方案,刚开始的时候还只有G2
和G6
两款产品,其中G2
针对于图形化报表,包括折线图、柱状图、饼图等等一系列图形化报表,类似于Echarts
;G6
则偏向于关系型图表,包括树形图、脑图、流程图等。
近几年则拓展了S2
、X6
、L7
等等功能。其中:
S2 是多维交叉分析领域的表格解决方案,数据驱动视图,提供底层核心库、基础组件库、业务场景库,具备自由扩展的能力,让开发者既能开箱即用,也能基于自身场景自由发挥。
S2
比较偏向于多维度数据分析领域,对于接触过BI数据分析功能的人员应该比较熟悉。官网的Demo里,渲染100w条数据是毫无压力的。S2
对于大数据的性能测试,可以参考官方Demo里的这张图片:
对于偏向于数据分析的项目,个人感觉Antv S2
还是比较友好的。
7. vue-easytable
(2022/05/11补充)
官网地址:http://huangshuwei.gitee.io/vue-easytable
GitHub库地址:https://github.com/Happy-Coding-Clans/vue-easytable
Demo地址:http://huangshuwei.gitee.io/vue-easytable/#/zh/demo
vue-easytable
是一个基于 Vue2.x 的表格组件。其主要以Table
组件为主,另外包含了有限的几个基础组件:Loading 加载
、locale 国际化
、Icon 图标
、Pagination 分页
、Contextmenu 右键菜单
。
网站上对于虚拟滚动的部分介绍是:
建议当一次性需要展示 1000 以上 数据时使用,可以支撑 20 万以上数据
开启虚拟滚动功能后,其他功能依然可用
其中,尤其是“对于开启虚拟滚动功能后,其他功能依然”可用这一点,是难能可贵的。对于部分其他框架来说,开启了虚拟滚动功能后,有些功能就会被限制。
另外,看Git上的代码提交记录,可以看到作者对于该项目还是比较重视的。
对于我个人而言,vue-easytable
基本上能满足大部分功能,如果api能再做完善,并且增加对Vue3.0的支持,我相信将会有更加多的使用者,现在看npm上weekly download大概是4k+的水平。
后记
对于以上几个框架,我个人感觉比较完善的几个框架是Surely Vue
、vxe-table
、Ag Grid
和Antv S2
、vue-easytable
,其中:
Surely Vue
: 针对于表格功能,提供了比较完善的功能。vxe-table
:免费版本提供的功能比较完善,部分高级功能需要pro版插件支持,但是深度使用后会发现BUG不少(并不是我不看好vxe-table
,是因为我平时就在深度使用,发现了部分问题)。Ag Grid
:整体功能比较强,部分功能需要企业版才支持。Antv S2
:偏向于数据分析功能。vue-easytable
:基础功能比较完善,使用者相对较少。
当然上面只是我个人的一些想法。
vue大数据表格解决方案的比较相关推荐
- vue渲染大量数据优化_vue大数据表格卡顿问题的完美解决方案
前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系 ...
- 智慧城市规划大数据系统软件解决方案
智慧城市规划大数据系统软件解决方案 智慧城市数据融合可视化系统的设计实施经验进行总结,在设计理念.设计方法.技术实现.常见问题等方面,对设计实施经验进行总结,以方便读者更好的了解可视化系统的设计实现. ...
- 使用 AntV S2 打造大数据表格组件
导读 在蚂蚁的大数据研发平台中,数据表格是一类重要的业务组件.我们需要流畅的展示 SQL 查询出来的上万条结果,并对结果做筛选.排序.搜索.复制.框选.聚合分析等操作.同时也存在数据手工录入的场景,需 ...
- 富士通大数据架构解决方案闪耀存储峰会
文章讲的是富士通大数据架构解决方案闪耀存储峰会,世界领先的ICT综合服务商富士通(Fujitsu)近日亮相2013(第九届)中国存储峰会.作为目前国内存储界规模最大和历史最长的存储大会,本届存储峰会以 ...
- 主流大数据存储解决方案评析
EMC Isilon:横向扩展 性能突出 大数据存储不是一类单独的产品,它有很多实现方式.EMC Isilon存储事业部总经理杨兰江概括说,大数据存储应该具有以下一些特性:海量数据存储能力,可轻松管理 ...
- 虚拟表格(大数据表格)
虚拟表格(第一种实现) 实现描述 **1.我们创建三个相互嵌套的标签,最外层的用于提供一个滚动的框架,中间层用于模拟列表的高度,里层用于存放渲染的数据 ,最外层我们设置一下宽高并且使用overflow ...
- 物流货运平台大数据风控解决方案
物流货运平台基于大数据接口构建全面的风控体系,从而解决身份核验.服务转型.制度创新等难题,提高各方服务质量以及合作双方的黏性,使得多方合作持续稳定,从而提升综合运输服务品质. 物流货运平台大数据风控解 ...
- 金融借贷平台大数据风控解决方案
基于大数据API接口,金融借贷平台可有针对性的对平台管理人员.借贷用户构建不一样的.全方位风控解决方案. 金融借贷平台大数据风控解决方案 一.平台管理人员风控 对平台管理人员进行背调主要是为了核实重要 ...
- 【推荐】智慧检察公益诉讼辅助快检AI人工智能大数据平台解决方案合集(共183份,928M)
[推荐]智慧检察公益诉讼辅助快检AI人工智能大数据平台解决方案,检务保障系统,整体解决方案合集,公益诉讼方案,可视化检察管理,概要详细设计交付验收模板. 下载地址:https://download.c ...
最新文章
- [转]添加mysql索引的3条原则
- NameValueCollection类总结和一个例子源码
- 25分钟训练机器人学会6个动作,伯克利开发高效机器人操纵框架
- LodRunner实现大负载测试的四部曲(配置系统参数、配置LR、修改脚本、设置组策略)...
- 使用Sysmon和Splunk探测网络环境中横向渗透
- android tcp socket框架_最流行的 Web 框架 Gin 源码阅读
- VTK:Utilities之CustomDenseArray
- 探索Julia(part11)--自定义函数
- python图形化编程更改内部参数_python-参数化-(3)(替换数据)
- OpenSSL的Heartbleed漏洞原理及简单模拟
- 五子棋java百度贴吧_五子棋单机版
- [转]纯JS实现出生日期[年月日]下拉菜单
- Android数据库大批量数据插入优化
- 基于人脸识别的宿舍门禁系统
- 伴随矩阵和逆矩阵的关系证明
- 修复 Key is stored in legacy trusted.gpg keyring
- POJ - 3311- Hie with the Pie ( 状压dp )
- webpack `Invalid Host/Origin header`问题
- Mac配置item2高亮颜色
- uevent netlink(KOBJECT_UEVENT)
热门文章
- Spark-Core基础练习题30道
- 异步升压 内置mos升压芯片FP6298
- Android开发短信拦截与读取,消息通知Notification
- 微信公众号开发--获取当前用户位置,并把经度纬度转化成省市县
- 用户反馈流程:评价、评论流程
- Ubuntu18.04登录输密码时出现“抱歉,登录失败,请再试一次”解决方法
- Cocos2d-x 3.x学习笔记:猩先生带你打飞机(二)素材准备与游戏菜单场景
- android ota升级服务,android 标准OTA升级流程
- idea-提示内存不足
- mt6765原理图mt6765资料下载