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：基础功能比较完善，使用者相对较少。

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