querySelector('.el-table__body-wrapper').appendChild(lastRowObserverElement); observer.observe(lastRowObserverElement); async function loadMoreData() { loading = true; // 加载更多数据的逻辑 const newData = await fetchData(/* 页码和每页数量 */); // 更新表格数据 loading = false; } 3. ...
element ui table加载大量数据卡顿 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是 JS 引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳...
引发页面卡顿的原因主要是由于数据量太大导致渲染的 dom 较多,然后页面就卡顿了。。。 下面使用 element 中的 el-table 实现一下虚拟滚动来解决这个问题,Antd vue 中的写法也类似,a-table 的结构相似。 1 先搞页面结构 <template> <div> <div class="gl-cell-card-box"> <el-table ref="tableRef" style...
前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据,这时点击其他DOM操作,会出现卡顿的现象。如点击复选框。 官网的示例也搞了,超过200行后操作就会卡很久,比如复选框 基于elementUI的table,在不修改源码的情况下支持大数据了渲染的场景 两种解决方案 一、Vue自定义指令 (通过自定义指令隐藏数...
基于vue+elementui技术栈下,某个页面加载一个再普通不过的table,发现总是loading在十几秒之后才能渲染出table,甚至还会卡死。 众所周知。。我目前做了很多toB的业务。。都没有遇到过这种基础的table卡顿,页面白屏问题,那么是为什么呢。。 平平无奇的table如下图: 一开始我还以为是接口请求时间过长之后超时的问题,...
elementuitable表格切换分页的时候卡顿的原因是表格数据多。解决方法如下:1、升级elementUI到v2.8.0以上。2、避免使用表格中使用show-overflow-tooltip。3、在el-table或父元素上设置z-index,或调高z-index(针对ie)。调高z-index时,页面弹出框等元素z-index值要比el-table大,否则会被遮挡 ...
鼠标放在table组件上时,用滚轮滚动,感觉到了卡顿,见下图; performance 从上图可以发现,在某些时间段内帧数极低,同时火焰图上可以发现于此同时在执行mouseenter事件的函数,综上推测源头应该是鼠标移动的相关事件,这个鼠标事件本身耗时不多,但是触发了Vue的updateComponent。
vue3+element plus项目,当使用了el-table的展开行时,想要实现全部展开功能,在全部展开时会卡顿,阻塞线程。使用了:expand-row-keys="expandRowArr",通过将key全部插入数组expandRowArr.value = comm...
this.tableData = this.commonJs.mapNewTableData(res.data,this.expandRow); //展开已展开的数据 } else { this.tableData = this.commonJs.mapNewTableData(res.data,res.data[0].id); //默认展开第一层 } this.componentKey += 1; //销毁更新dom }).finally(() => { this.loading ...
VUE,ElementUI列表大数据卡顿问题?(已解决) Hally 115138 发布于 2018-11-30 fenbox 6.8k217979 更新于 2020-10-19 基于elementUI的table,在不修改源码的情况下支持大数据了渲染的场景 2019-7-18又优化了一版(后面遇到BUG,就直接更改这个了),相当于重写,用了指令的一些特性;完善了下注释...