1. 表格解决卡顿问题,那么虚拟表格原理呢大概就是: 减少对DOM节点的渲染,通过滚动函数节流实现滚动后事件来动态渲染数据
2. 基础表格其实就是element的表格的升级版,修改了ele的表格bug(如果你想使用个普通表格你无需安装其他库,就使用这个表格即可),你可以发现基础表格里面的示例没有配置:use-virtual 这个属性。
3 基础表格没有使用use-virtual属性,代表表格数据不多,只想要一个普通的表格。如果你表格卡。请你关注下虚拟表格部分。
4. 使用u-table 开启use-virtual虚拟可以支持微小的合并行|列 如2列 2行,支持多级头, 超过2行2列可能布局错乱,因为虚拟滚动的原理导致某些节点并未渲染。
4.5: 使用u-table 开启use-virtual不支持开展行,如果需要展开行,你是要虚拟表格部分的ux展开行!
5. u-table不支持展开行,需要展开行使用ux-grid
6. ux-grid解决列多 行多导致卡的情况, u-table解决行多的情况,不解决列多的情况(如你的列超过70+,你可能就需要使用ux-grid了,因为此时你需要把列也虚拟)
7. 重点:虚拟表格集成了基础表格的东西(如属性/方法/事件)!
8. 虚拟表格在本文档中呢, 意思就是解决了数据量多导致卡顿的情况! 基础表格在文档中呢,意思就是升级版的el-table(但是没解决数据多卡的情况)!
9. 编辑型表格呢,是解决那种表格单元带有输入框或者选择时间等等的情况,而导致卡顿的场景!意思就是表格单元格具有一定的操作,单元格有自定义组件或者UI库组件等等
umy官网
umy-ui一套为开发者准备的基于Vue 2.0的桌面端组件库,完美解决表格万级数据渲染卡顿,编辑表格卡顿问题
回答下那些看见umy-ui的React哈,首先不要去看UI两字,我们是想后续做更多组件。所以搞成UI库。你完全可以按需发布库里面的表格组件,然后使用其他所以不要觉得是你在安装一个UI库,让你去使用一个UI库,并非如此!如果你只是想解决表格卡顿,你只需要关注umy-ui里面的表格组件!
umy-ui叫(U米-ui)
(更多问题请加入umy-ui交流群吧),不需要您的捐赠,只需要单击上方的Star !!!
QQ交流1群:675286117已满员
QQ交流2群:939125115新群未满员
npm安装
推荐使用npm的方式安装,它能更好地和webpack打包工具配合使用
npm install umy-ui
CDN方式
<!--引入表格样式-->
< link r
u-table的使用方法和el-table没什么区别。这里必须加的两个属性,不加的话无法实现虚拟表格,页面一样会卡死,第一个,use-virtual 开启虚拟滚动,第二,个 height 必须限制高度,这两个不加就是普通表格,加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度,可以通过vuex将屏幕大小的数据存储起来,通过监听屏幕大小,动态设置表格高度。新建umy-ui.scss文件,并引入。表格高度根据浏览器屏幕高度变化。
解决该问题主要是用虚拟滚动的思路。引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多,然后页面就卡顿了。使用了 elementUI 中的 el-table 组件,不使用分页,当表格数据过多时导致页面卡顿;下面使用 element 中的 el-table 实现一下虚拟滚动来解决这个问题。
useVirtualList用于虚拟化列表,用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿的问题。
总体实现思路:从start到end处截取数据的一部分,监听scroll事件,实时改变start和end
首先做一些前置工作,计算需要用到的变量。
第一步:计算container的容量(viewCapacity)。如果props中的itemHeight是以像素为单位的数字,则容量为container的高度除itemHeight。如果props的itemHeight是动态值,则for循环列表数据累加it.
解决方案是继承覆盖element的Table组件,并重写Table组件的bindEvents和syncPostion方法,因为根据源代码发现,Table中的syncPostion方法可能出于性能的原因使用了防抖,我们这里就直接把防抖拿掉了,但这不是产生问题的主要原因,这个只是会导致轻微的迟滞。
产生这个问题的最主要原因是:滚轮事件会自动触发滚动事件,滚动事件中自动使用了behavior: 'smooth’机制,这个机制会让滚动看起来很丝滑,但会耗费更多的性能,估计浏览器处于性能考虑导致两个滚动效果不同步了
1、卡顿原因
因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。
具体原理可参考别的大佬写的文章: DOM性能瓶颈与Javascript性能优化.
2、解决方法及原理
解决思路可参考: 页面中长列表滚动的优化.
解决方法
使用第三方插件 https://github.com/livelyPeng/pl-table.
具体使用方法也需参照上面github 这里el-tree卡顿直接去上述链接github参照pl-table进行修改并修改部分样式就是一个el-tr
vue大数据表格上万条数据,树型表格,解决el-table表格数据量过大渲染卡死的问题,使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。,先看看效果吧,拿实例说话,直接渲染四万多条数据不分页,树形表格可以展开。
问题:使用vue+iview或者vue+element-ui等,在完善表格功能的同时,遇到几万几十万的表格数据,渲染特别慢,甚至会发生表格卡顿的问题,体验感非常不好
解决方式:将原来的tablet替换成umy-ui的虚拟表ux-grid。umy-ui的虚拟表ux-grid是对于列表形态的数据展示的按需渲染,根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分,而不是去完整地渲染长列表,换句话说,就是每次只渲染可视区域
具体使用方式官方开发文档里面都有,umy-ui官网教程:umy-ui开