基于vue的表格组件,渲染大量数据时都会变得卡顿吗?

基于vue的表格组件,渲染大量数据时都会变得卡顿吗?

这个问题困扰我很长时间,一直找不到根本原因,今在此提问希望与大家讨论一番。

公司内部管理系统翻新,原版用的layui,其中一个页的表格,共23列,左右各有一个固定列,每列列宽都可拖动调整,每页100条数据,表头固定内部可滚动。
现在换用vue,表格用iview的table组件,每页30条数据,其它功能与原版一样,但使用时发现表格滚动起来明显卡顿,而且固定列与非固定列位置不同步(chrome下),换用ie11,滚动时卡的根本没法用,而原版在ie10下都可以流畅运行。
后来缩减到10列,多余信息用弹框,卡顿改善了很多,但对比原版还是能明显看出卡顿。
再后来换ant-design-vue的table做实验,表格滚动也是无法幸免的卡,再换用element-ui,性能似乎更弱。

一开始认为是vue对大量数据做响应式处理导致的,但表格滚动时并不会改变数据啊,我知道缩减列数或每页条数,可以改善卡顿的问题,可是找不到根本原因。兄弟们有没有什么见解?


回答:

这一是因为vue的数据监听,二是因为渲染了大量标签,可以使用ng-grid这种动态加载的表格,原理就是使用div进行前后元素的占位


回答:

用的umy-ui,我的表格还有合并,具体看文章: https://juejin.cn/post/7107161553526325278

以上是 基于vue的表格组件,渲染大量数据时都会变得卡顿吗? 的全部内容, 来源链接: utcz.com/p/935680.html

回到顶部