V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
nobuger
V2EX  ›  问与答

几百个属性长表的前端展示方法

  •  1
     
  •   nobuger · 2020-08-05 10:16:21 +08:00 · 3412 次点击
    这是一个创建于 1331 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前有业务需求是网页端展示一个很长的表,大概 3 百个表属性,内容比较多,用户打开这个也页面估计会卡慢。

    请问通过什么解决方法可以让这种类型的网页打开比较流畅呢,有没有什么比较好的实践?

    数据库操作涉及很多表,因为这些属性都是分开存储的,通过业务 ID 关联。

    自己想到的方法可不可以参考瀑布流,做一个横向的瀑布流,用户往右拖动滚动条可以自动加载数据。问题是这种懒加载一般用于图片,用于表单、还是横向的可行性?

    有没有比较好的方法用于很多属性的表展示呢,求教啊

    44 条回复    2020-08-06 10:18:11 +08:00
    nobuger
        1
    nobuger  
    OP
       2020-08-05 10:21:10 +08:00
    前端使用的 VUE
    nobuger
        2
    nobuger  
    OP
       2020-08-05 10:34:10 +08:00
    因为太小儿科了所以没人吗 =..=
    qiayue
        3
    qiayue  
       2020-08-05 10:50:01 +08:00
    根据实际需求来,这个页面是给谁看的,是否需要每次都看 300 列数据?
    wingtao
        4
    wingtao  
       2020-08-05 10:52:50 +08:00
    分页、懒加载、虚拟渲染都可以
    MrTreasure
        5
    MrTreasure  
       2020-08-05 10:53:31 +08:00
    不要一次性全部加在。前端做一个筛选,把要展示的属性筛选出来,表格只展示这些。
    用户大概率不会一次看完 300 个属性,看的最多的是自己关注的,本地再做一个缓存,缓存上次选择的属性
    BreadKiller
        6
    BreadKiller  
       2020-08-05 10:53:37 +08:00
    可以只显示某几个关键列,然后最右边用详情按钮点开弹窗?
    或者可以自定义表头,让用户选择需要查看的信息
    KuroNekoFan
        7
    KuroNekoFan  
       2020-08-05 10:55:37 +08:00 via iPhone
    我觉得滚动加载长表,尤其是桌面端,真的是个很脑残的产品设计,虽然也不是没办法解决你说的问题(虚拟表什么的,ui 框架应该都内置了)
    rabbbit
        8
    rabbbit  
       2020-08-05 10:56:51 +08:00
    这个多没人会看, 留一些关键的其他的按类分页 /改成选项卡
    rabbbit
        9
    rabbbit  
       2020-08-05 10:57:12 +08:00
    这么多没人会看, 留一些关键的其他的按类分页 /改成选项卡
    nobuger
        10
    nobuger  
    OP
       2020-08-05 10:58:54 +08:00
    @qiayue 是一些设计数据,很多,确实是一次都要展示出来
    en20
        11
    en20  
       2020-08-05 11:02:13 +08:00
    你说的是超大列表, 可视区渲染吧. vue-virtual-scroll-list 看一下应该是你需要的
    nobuger
        12
    nobuger  
    OP
       2020-08-05 11:04:46 +08:00
    @en20 是数据属性很多,不是很多条数据
    nobuger
        13
    nobuger  
    OP
       2020-08-05 11:06:03 +08:00
    nobuger
        14
    nobuger  
    OP
       2020-08-05 11:06:48 +08:00
    @rabbbit 属性不太好分类
    whypool
        15
    whypool  
       2020-08-05 11:07:46 +08:00
    分类展示,sku 啥的
    nobuger
        16
    nobuger  
    OP
       2020-08-05 11:08:07 +08:00
    @KuroNekoFan 我说的是属性很多,是横向的滚动加载,也可以吗
    NotNil1
        17
    NotNil1  
       2020-08-05 11:08:50 +08:00   ❤️ 1
    详细追业务关注哪些,根绝业务需求,给出多个透视图,多个页面
    rabbbit
        18
    rabbbit  
       2020-08-05 11:10:37 +08:00
    @nobuger
    按 a ~ z 26 个单词 /拼音首字母分类 🐶
    wangxiaoaer
        19
    wangxiaoaer  
       2020-08-05 11:19:20 +08:00
    每个表格对应前端的一个表单,用户激活再渲染这个表单。页面首次进入只加入默认的关键表单。
    sunjourney
        20
    sunjourney  
       2020-08-05 11:35:06 +08:00
    用户自己 set 要看的 key
    sillydaddy
        21
    sillydaddy  
       2020-08-05 11:38:33 +08:00 via Android
    @nobuger “不是很多条数据”,如果是这样的话,可以先测一下实际的性能表现吧?如果没问题那就不用改啦
    qiayue
        22
    qiayue  
       2020-08-05 11:47:32 +08:00
    没有谁的肉眼能够一次性看完全 300 个属性,所以你的实现也不应该是一次把 300 个属性全部展示出来。
    redbuck
        23
    redbuck  
       2020-08-05 11:48:36 +08:00
    横向一样能搞懒加载,可以用 MutationObserver.

    数据多的话,还是用虚拟卷轴之类的.

    另外,如果数据不需要响应,记得 freeze 一下.
    libook
        24
    libook  
       2020-08-05 11:50:11 +08:00   ❤️ 1
    你试试,是不是真的会卡慢,我觉得 300 个属性其实还好。

    如果真的卡再考虑优化,比如数据一次性获取,但是 DOM 按需渲染,你的思路是可以试试的。
    TomatoYuyuko
        25
    TomatoYuyuko  
       2020-08-05 11:50:24 +08:00
    设计有问题吧,让用户搜索下拉框选择显示哪些表头,再动态生成就行了,谁能一眼 300 列啊
    VictorJing94
        26
    VictorJing94  
       2020-08-05 11:54:08 +08:00
    冻结表头和列头
    IGJacklove
        27
    IGJacklove  
       2020-08-05 12:00:15 +08:00
    @nobuger 只加载关键数据,想要看全部数据单独做个详情页单独加载.总不可能加载一次他就看所有数据的所有属性吧,想看哪个的所有属性,单独加载哪个就可以了.
    xingyue
        28
    xingyue  
       2020-08-05 12:17:22 +08:00 via Android
    @libook 233333,我第一反应也是这个,这点性能可能浏览器还看不上~
    不过展示设计肯定得再想想,300 列一起看不如不看。。。
    anguiao
        29
    anguiao  
       2020-08-05 12:17:43 +08:00 via Android
    我觉得应该是慢在数据库操作上,而不是前端渲染。前端渲染一个 300 列的表格,应该不是什么大问题。
    想直接展示全部属性的话,感觉并不是很好优化。
    rodjerL
        30
    rodjerL  
       2020-08-05 12:27:31 +08:00 via iPhone
    可以用虚拟滚动,react 有个库 react-window ,vue 不太清楚
    suzic
        31
    suzic  
       2020-08-05 13:08:04 +08:00 via Android
    这些字段做成几个集合吧,前端搞成类似手风琴的折叠面板,每个面板展示一组集合
    loading
        32
    loading  
       2020-08-05 13:11:30 +08:00 via Android
    你这个是 ui 问题,让设计师画成图再说。
    jjianwen68
        33
    jjianwen68  
       2020-08-05 13:17:24 +08:00   ❤️ 1
    nobuger
        34
    nobuger  
    OP
       2020-08-05 13:52:19 +08:00
    @jjianwen68 就是这样!谢谢
    nobuger
        35
    nobuger  
    OP
       2020-08-05 13:55:25 +08:00
    @redbuck 谢谢
    @libook 谢谢
    xingyuc
        36
    xingyuc  
       2020-08-05 13:59:59 +08:00
    倒个 excel 让他用手机 office 慢慢看 hhh,怎么可能这么多字段全都要看的
    shenyu1996
        37
    shenyu1996  
       2020-08-05 14:25:23 +08:00 via Android
    我有个问题 像这样的虚拟列表能解决浏览器 ctrl + f 查找的问题么
    shyangs
        38
    shyangs  
       2020-08-05 14:46:37 +08:00
    起點小說《从零开始》 3000 章節, 點進目錄頁也沒覺得卡慢.

    300 這個數量級對現代瀏覽器而言應該不會有性能問題.
    raymanr
        39
    raymanr  
       2020-08-05 17:38:07 +08:00
    楼上说怎么可能都要看的得知道...

    领导的心态是: 我可以不看, 但你不能不显示
    qiayue
        40
    qiayue  
       2020-08-05 17:44:14 +08:00
    我们有个类似需求,需要表格横向显示 100 天数据,每天有 20 个列,所以总共最多 2000 列。
    但是并不需要一次性显示完 2000 列,每次只需要显示自定义列即可。
    otakustay
        41
    otakustay  
       2020-08-05 19:41:24 +08:00
    横向懒加载对性能帮助很少,弄不好还可能倒拖性能
    建议干脆导出 excel 给用户
    gzhhfj
        42
    gzhhfj  
       2020-08-05 22:55:39 +08:00 via Android
    tab 页分不行吗?打开的时候加载
    tairan2006
        43
    tairan2006  
       2020-08-06 09:51:03 +08:00
    让用户自己选要看的属性……
    miniwade514
        44
    miniwade514  
       2020-08-06 10:18:11 +08:00
    300 多列?用户要滚动到崩溃啊。感觉这是产品设计的问题,必须搭配搜索功能,搜到的列才展示出来。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4580 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 95ms · UTC 01:06 · PVG 09:06 · LAX 18:06 · JFK 21:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.