当表格数据量过大的时候,如何使用不分页进行展示

表格数据过大的时候,渲染时间则增大。使用分页就可以解决,但是有的时候用户不想使用分页,那么前端可以监听滚动条进行懒加载,但是当数据都加载出来。数据量就又大了。

  1. 组件文件名: elTableVirtualScroll.vue 通过仅渲染可视区域内的内容来减少 DOM 节点数量,从而提升页面响应速度和内存使用效率

  2. 使用案例:在文件中引入组件,tableData1变量是表格全部数据,tableData则是展示的数据,tableDataChange用来监听容器滚动条,进而计算展示数据

    复制代码
               <VirtualScroll 
                 :data="tableData1"
                 :height="62"
                 key-prop="id"
                 @change="tableDataChange">
                 <el-table
                   :data="tableData"
                   border
                   ref="tables"
                   height="50vh"
                   v-loading="tableLoading"
                   style="width: 100%;">
                   
                 </el-table>
               </VirtualScroll>

    tableDataChange(renderData) {
    this.tableData = renderData
    if(this.tableData.length > 0) {
    this.tableData.unshift(this.formObject)
    }
    },

相关推荐
jktantan16 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么17 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
前端精髓18 小时前
调用openrouter的免费API模型
java·前端·javascript
螺丝钉tina1 天前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
开开心心就好1 天前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
এ慕ོ冬℘゜1 天前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript
web打印社区1 天前
Lodop排障总纲-常见报错一张表
开发语言·前端·javascript·chrome·websocket
小郎君6581 天前
(一)为什么表单需要第三种状态:disabled、readonly 与纯文本展示
前端·vue.js
程序员大阳1 天前
副队长JavaScript教程(56)-DOM之表单操作
javascript·dom·表单操作
Dxy12393102161 天前
JS AES加密详解
开发语言·javascript·ecmascript