V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
a494836960
V2EX  ›  JavaScript

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

  •  2
     
  •   a494836960 · 2019-06-21 16:17:03 +08:00 · 5342 次点击
    这是一个创建于 890 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    第 1 条附言  ·  2019-06-24 17:31:50 +08:00
    https://run.iviewui.com/ARqf9GY1
    已改好,, 修改了两个地方
    1、heightTop 的计算方式
    2、做内容的 table 样式 height 改成了 marginTop
    19 条回复    2019-06-24 17:30:35 +08:00
    icebreaker12
        1
    icebreaker12   2019-06-21 16:38:28 +08:00
    所以数据量大为什么不分页呢
    a494836960
        2
    a494836960   2019-06-21 16:42:31 +08:00
    @icebreaker12 几千条数据客户想一次选完。。🤣
    a3063291
        3
    a3063291   2019-06-21 16:44:41 +08:00
    @a494836960 伪需求,我就不信他能一个个选几千条数据。有些数据不需要展示,可以提供筛选条件,发送到后端批量操作即可。
    Hilong
        4
    Hilong   2019-06-21 16:52:05 +08:00 via Android
    把数据冻结起来,让 vue 不要去动态监听,用 object.frozen
    Hilong
        5
    Hilong   2019-06-21 16:52:36 +08:00 via Android
    这个是优化性能
    a494836960
        6
    a494836960   2019-06-21 16:55:28 +08:00
    @a3063291 大佬,, 我现在不管啥需求了,, 就想知道为什么会自己动。。帮忙看看撒
    myliang
        7
    myliang   2019-06-21 16:57:13 +08:00 via Android
    可视区渲染
    a494836960
        8
    a494836960   2019-06-21 16:57:21 +08:00
    @Hilong 嗯,,有考虑,,但是在数据一多也是杯水车薪
    rain0002009
        9
    rain0002009   2019-06-21 16:59:22 +08:00
    修改.table-top 的高度会触发滚动事件,滚动事件又会修改.table-top 的高度
    a494836960
        10
    a494836960   2019-06-21 17:10:41 +08:00
    @rain0002009 我之前也是这么想的,,但是我向上滚是好的呀
    love
        11
    love   2019-06-21 18:16:31 +08:00
    现在各个框架都有虚拟列表实现,几万条不是问题。
    pecopeco
        12
    pecopeco   2019-06-21 18:28:11 +08:00
    @rain0002009 说得没错,猜测跟滚动条机制有关,当前视图以上的元素如果增加高度,会触发 scroll 事件,顺着这个思路简单修改了一下,应该可行 @a494836960 https://run.iviewui.com/psIRmayr
    qq316107934
        13
    qq316107934   2019-06-21 18:29:24 +08:00 via Android
    @love 正解,用虚拟列表无所谓多少条,数据处理扔到 web worker。
    Fortnight
        14
    Fortnight   2019-06-21 18:46:18 +08:00
    table 的高度增加导致滚动条被压缩,就无限触发事件了
    mmmfj
        15
    mmmfj   2019-06-21 18:53:04 +08:00 via Android
    table 我玩不转,有些需求我是自己布局实现
    cloudzqy
        16
    cloudzqy   2019-06-21 22:15:30 +08:00 via Android
    楼主好像解决了,这种伪需求就应该毙在需求讨论阶段,用户根本不知道自己需要什么样的交互,你给他们设计个更好的交互,他们反而会美滋滋。
    w292614191
        17
    w292614191   2019-06-22 08:40:56 +08:00
    @cloudzqy
    赞同。
    要善于在用户的一堆噼里啪啦中找到核心,然后实现就是了,然后完成后客户一看, 对对对,就是这样的。
    深有体会。
    Tankpt
        18
    Tankpt   2019-06-22 09:39:26 +08:00 via iPhone
    无限滚动了解下
    a494836960
        19
    a494836960   2019-06-24 17:30:35 +08:00
    @cloudzqy 周末不方便,,, 今天来改好了。。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2259 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:12 · PVG 20:12 · LAX 04:12 · JFK 07:12
    ♥ Do have faith in what you're doing.