求一个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 提供了虚拟滚动功能，并且可以监听到滚动事件。
现在的难点是，怎么能在滚动事件中误别并取出当前那些行在可视区范围内。
最佳答案
0
其他回答(1)
0
没找到解决方案
