求助 JS 大佬 因数据量比较大前端完全展示非常卡,自己写一个大数据量使用的 table 实现的时候遇到点问题

2019-06-21 16:17:03 +08:00
 a494836960

网上找一个 Vue 写的 table 参照这个写: https://github.com/lison16/vue-bigdata-table

自己写的: https://run.iviewui.com/WbbS4iq9

我是想滚动的时候渲染这个位置的数据,但是向下滚动的时候他会自己动,,向上没有这个问题,

6425 次点击
所在节点    JavaScript
19 条回复
icebreaker12
2019-06-21 16:38:28 +08:00
所以数据量大为什么不分页呢
a494836960
2019-06-21 16:42:31 +08:00
@icebreaker12 几千条数据客户想一次选完。。🤣
a3063291
2019-06-21 16:44:41 +08:00
@a494836960 伪需求,我就不信他能一个个选几千条数据。有些数据不需要展示,可以提供筛选条件,发送到后端批量操作即可。
Hilong
2019-06-21 16:52:05 +08:00
把数据冻结起来,让 vue 不要去动态监听,用 object.frozen
Hilong
2019-06-21 16:52:36 +08:00
这个是优化性能
a494836960
2019-06-21 16:55:28 +08:00
@a3063291 大佬,, 我现在不管啥需求了,, 就想知道为什么会自己动。。帮忙看看撒
myliang
2019-06-21 16:57:13 +08:00
可视区渲染
a494836960
2019-06-21 16:57:21 +08:00
@Hilong 嗯,,有考虑,,但是在数据一多也是杯水车薪
rain0002009
2019-06-21 16:59:22 +08:00
修改.table-top 的高度会触发滚动事件,滚动事件又会修改.table-top 的高度
a494836960
2019-06-21 17:10:41 +08:00
@rain0002009 我之前也是这么想的,,但是我向上滚是好的呀
love
2019-06-21 18:16:31 +08:00
现在各个框架都有虚拟列表实现,几万条不是问题。
pecopeco
2019-06-21 18:28:11 +08:00
@rain0002009 说得没错,猜测跟滚动条机制有关,当前视图以上的元素如果增加高度,会触发 scroll 事件,顺着这个思路简单修改了一下,应该可行 @a494836960 https://run.iviewui.com/psIRmayr
qq316107934
2019-06-21 18:29:24 +08:00
@love 正解,用虚拟列表无所谓多少条,数据处理扔到 web worker。
Fortnight
2019-06-21 18:46:18 +08:00
table 的高度增加导致滚动条被压缩,就无限触发事件了
mmmfj
2019-06-21 18:53:04 +08:00
table 我玩不转,有些需求我是自己布局实现
cloudzqy
2019-06-21 22:15:30 +08:00
楼主好像解决了,这种伪需求就应该毙在需求讨论阶段,用户根本不知道自己需要什么样的交互,你给他们设计个更好的交互,他们反而会美滋滋。
w292614191
2019-06-22 08:40:56 +08:00
@cloudzqy
赞同。
要善于在用户的一堆噼里啪啦中找到核心,然后实现就是了,然后完成后客户一看, 对对对,就是这样的。
深有体会。
Tankpt
2019-06-22 09:39:26 +08:00
无限滚动了解下
a494836960
2019-06-24 17:30:35 +08:00
@cloudzqy 周末不方便,,, 今天来改好了。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/576223

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX