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

[nobuger]

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

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

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

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

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

[sillydaddy]

@nobuger “不是很多条数据”，如果是这样的话，可以先测一下实际的性能表现吧？如果没问题那就不用改啦

[qiayue]

没有谁的肉眼能够一次性看完全 300 个属性，所以你的实现也不应该是一次把 300 个属性全部展示出来。

[redbuck]

横向一样能搞懒加载,可以用 MutationObserver.

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

另外,如果数据不需要响应,记得 freeze 一下.

[libook]

你试试，是不是真的会卡慢，我觉得 300 个属性其实还好。

如果真的卡再考虑优化，比如数据一次性获取，但是 DOM 按需渲染，你的思路是可以试试的。

[TomatoYuyuko]

设计有问题吧，让用户搜索下拉框选择显示哪些表头，再动态生成就行了，谁能一眼 300 列啊

[VictorJing94]

冻结表头和列头

[IGJacklove]

@nobuger 只加载关键数据,想要看全部数据单独做个详情页单独加载.总不可能加载一次他就看所有数据的所有属性吧,想看哪个的所有属性,单独加载哪个就可以了.

[xingyue]

@libook 233333，我第一反应也是这个，这点性能可能浏览器还看不上～
不过展示设计肯定得再想想，300 列一起看不如不看。。。

[anguiao]

我觉得应该是慢在数据库操作上，而不是前端渲染。前端渲染一个 300 列的表格，应该不是什么大问题。
想直接展示全部属性的话，感觉并不是很好优化。

[rodjerL]

可以用虚拟滚动，react 有个库 react-window ,vue 不太清楚

[suzic]

这些字段做成几个集合吧，前端搞成类似手风琴的折叠面板，每个面板展示一组集合

[loading]

你这个是 ui 问题，让设计师画成图再说。

[jjianwen68]

http://www.quasarchs.com/vue-components/virtual-scroll 这种？

[nobuger]

@jjianwen68 就是这样！谢谢

[nobuger]

@redbuck 谢谢
@libook 谢谢

[xingyuc]

倒个 excel 让他用手机 office 慢慢看 hhh，怎么可能这么多字段全都要看的

[shenyu1996]

我有个问题 像这样的虚拟列表能解决浏览器 ctrl ＋ f 查找的问题么

[shyangs]

起點小說《从零开始》 3000 章節, 點進目錄頁也沒覺得卡慢.

300 這個數量級對現代瀏覽器而言應該不會有性能問題.

[raymanr]

楼上说怎么可能都要看的得知道...

领导的心态是: 我可以不看, 但你不能不显示

[qiayue]

我们有个类似需求，需要表格横向显示 100 天数据，每天有 20 个列，所以总共最多 2000 列。
但是并不需要一次性显示完 2000 列，每次只需要显示自定义列即可。