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

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

  •  2
     
  •   a494836960 · 123 天前 · 2079 次点击
    这是一个创建于 123 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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