1、现象 有时候el-table的数据可能有成千上万条,而且又要在一页显示完,这时候页面渲染的dom太多了,可能会造成页面卡顿。 解决方案:给表格固定高度,只渲染用户在表格中滚动的视图dom 2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。 具体原理可参考别的大佬写...
5. 在ElementPlus表格中集成和实现三层懒加载功能 在上面的代码中,我们已经在<el-table>组件中启用了懒加载,并通过loadTableData方法实现了三层数据的动态加载。当用户展开某一行时,loadTableData方法会根据当前行的层级和ID来加载对应层级的数据,并通过resolve函数将数据传递给表格进行渲染。 这样,我们就实现...
先获取所有图片的 dom,通过document.body.clientHeight获取可视区高度,再使用element.getBoundingClientRect()API 直接得到元素相对浏览的 top 值, 遍历每个图片判断当前图片是否到了可视区范围内。代码如下: function lazyload() { let viewHeight = document.body.clientHeight //获取可视区高度 let imgs = document....
Bug Type: Component Environment Vue Version: 3.4.38 Element Plus Version: 2.8.1 Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0 Build Tool: Vite ...
Bug Type: Component Environment Vue Version: 3.4.37 Element Plus Version: 2.8.0 Browser / OS: Microsoft Edge 129.0.2792.89 / win 11 Build Tool: Vite Reproduction Related Component el-table Reproduction Link Link Steps to reproduce Click ...
element plus表格懒加载删除子级重新获取渲染 elementui清空表单,公司项目重构,经过商定使用elementui。在重构项目的时候发现一下elementui上很蛋疼的东西。例如,这个form表单就是一个。趁着在高铁上没事,把想写的东西写一下。 先说一下elementui提交form表单的时
🎉 A Vue.js 3 UI Library made by Element team. Contribute to element-plus/element-plus development by creating an account on GitHub.