首页 新闻 赞助 找找看

求一个vue下高性能实时表格解决方案

0
悬赏园豆:10 [已解决问题] 解决于 2021-12-27 09:39

背景:物流监控行业,需要一个在一个表格中实时展示设备数据,其中一个Web前端采用的是vue.js(iView)框架,时实表格先前用的是vuetable-2,效果不太理想,最后试着换成了vxe-table,稍微好一点。
目前用vxe-table实时刷新1000多条数据刷新还过得去,但我们的目标是至少做到10000条数据实时刷新不会卡顿。

需求:
1、数据量大,希望能做到10000+
2、设备的状态信息需要实时更新,越及时越好,延迟要控制在分钟级(一分钟内)。
3、还有一个特别影响性能的东西,设备上传的每条数据中都有一个经纬度,需要调用高德的在线解析为地理位置(逆地理编码)。
4、表格应该是响应式的,大小不能固定死。
5、表格有时需要打印或导出,导出时地理位置需要全解析出来。
6、表格数据行有选中(checkbox),行单击选中,双击定位到地图等操作。
7、目前前端用的是vue,框架用的是iView,暂时没有更换条件。表格组件目前用的是vxe-table,如果能在vxe-table中解决最好。

问题补充:

其实这种要求,前端用的是jquery之类的直接操作原生dom很容易实现,但vue这种由数据驱动的框架,对数据进行双向监听,不能精确控制数据渲染区域和刷新频率。

因为要解决这个问题,无非两个方向,控制刷新频率,限制数据大小(解决提需求的人这里就不考虑了,现在做产品越来越难做了,客户都是上帝,我们只有尽量满足的而已,先前那些保证性能的分页展示、渐进式加载都已经被客户投诉不方便砍掉了)。

我现在能想的的办法,就是能不能在vue中特别是在vxe-table中怎么精确控制,只渲染可视区域的数据,同时地理位置也只解析可视区就行,如果更做到刷新也只刷新可视区的就更好了。

当前 vxe-table 提供了虚拟滚动功能,并且可以监听到滚动事件。
现在的难点是,怎么能在滚动事件中误别并取出当前那些行在可视区范围内。

Adming的主页 Adming | 初学一级 | 园豆:119
提问于:2021-11-20 17:56
< >
分享
最佳答案
0

https://www.surely.cool/ 试试这个(没有亲测)

收获园豆:10
红色的风 | 初学一级 |园豆:76 | 2021-12-06 15:12
其他回答(1)
0

没找到解决方案

Adming | 园豆:119 (初学一级) | 2021-12-27 09:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册