2. 尝试分页或懒加载数据 分页:将数据分成多页显示,每页只加载固定数量的数据。这样可以在保证用户体验的同时,减少单次渲染的数据量。 懒加载:在用户滚动到页面底部或接近底部时,再加载下一页的数据。这种方式同样可以减少单次渲染的数据量,并且可以在用户需要时动态加载数据。 3. 优化 el-table 的渲染性能 使用...
1、现象 有时候el-table的数据可能有成千上万条,而且又要在一页显示完,这时候页面渲染的dom太多了,可能会造成页面卡顿。 解决方案:给表格固定高度,只渲染用户在表格中滚动的视图dom 2、卡顿原因 因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使
打开浏览器的DevTools ,选中“performance”,可以看到页面卡顿主要是由于渲染慢导致的 1659518981837.png 1659519178874.png 2. 2、解决大量Demo渲染导致页面卡顿 使用方法:虚拟加载 思路:因为数据量一次过来了2000+ ,渲染demo 需要浪费很大的时间;首先想到是在视图范围内:先渲染10条数据,当用户使用滚轮/ 滚动条滑动的时...
如点击复选框。 如何解决 这个时候常常有两种方法处理, 1、做分页,保证每页的数据渲染量很小,这样在列数很多的情况下也可以有良好的体验 2、如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二种方式 那么第二种方式要怎么去...
ElementPlus/Element-el-table数据量很大、在没有分页的时候页面会出现卡顿的情况 1 收藏 其实对于el-table 本身我也没有好的解决方案、只能给遇到同样问题的小伙伴推荐一下vxe-table了,vxe-table完全可以解决卡顿的问题 我用的是 vue3.x + vite 其他版本的vue也是支持的详情可以看下方的 gitHub和vxe-table文档 ...
渲染树形数据时,必须要指定 row-key和isTreeTable属性, row 中包含 children字段(必须不然展开收起会有问题)。 支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。
我们知道操作dom会引起页面的重绘重排。数据量过多导致浏览器渲染过多的标签元素,频繁的重绘重排导致DOM树占用内存较大使得用户操作阻塞。element-ui中的el-table组件在大数据的渲染上也是差强人意。对于动态数据想要不重新渲染是不可能的,那么只能让他去少渲染。
el-table嵌套el-select和el-input,循环出几百条或几千条数据时,下拉框选中回显卡顿和输入卡顿的问题el-input已找到了解决思路,如下:用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发...
但是如果有个一个table有40来个columns, 然后根据要求一行就要渲染将近30个el-select组件,并且允许用户插入新添加的数据。 每个el-select里的option数量其实并不多,大概10个左右。 但是当用户插入10条数据的时候,也就是页面里el-table里有将近300个el-select组件的时候,很明显的卡顿就出现。 将近3-4秒,如果操作过...