栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

vue大数据表格解决方案的比较

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(文档),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。社区版提供了表格的基础功能,企业版提供表格的高级拓展功能。

后记

对于以上几个框架,我个人感觉比较完善的几个框架是Surely Vue、vxe-table和Ag Grid,其中:

Surely Vue: 针对于表格功能,提供了比较完善的功能。vxe-table:免费版本提供的功能比较完善,部分高级功能需要pro版插件支持Ag Grid:整体功能比较强,部分功能需要企业版才支持。

当然上面只是我个人的一些想法。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/742149.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号