解决ElementUI列表大数据操作卡顿问题

问题描述

前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据，这时点击其他DOM操作，会出现卡顿的现象。如点击复选框。

官网的示例也搞了，超过200行后操作就会卡很久，比如复选框

基于elementUI的table，在不修改源码的情况下支持大数据了渲染的场景

思路：
减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据

解决方案：

Vue自定义指令（通过自定义指令隐藏数据）

ele-table

<template><div><el-table border :data="filteredData" style="width: 100%" height="300" :data-size="tableData.length" v-loadmore="handelLoadmore"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><div><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></div></template></el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><div><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></div></template></el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><div><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></div></template></el-table-column><el-table-column label="日期" width="180"><template slot-scope="scope"><div><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></div></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><div><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></div></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><div><el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button></div></template></el-table-column></el-table></div>
</template><script>export default {name: 'test',components: {},data () {return {tableData: [],currentStartIndex: 0,currentEndIndex: 20};},created () {this.getTableData();},computed: {filteredData () {return this.tableData.filter((item, index) => {if (index < this.currentStartIndex) {return false;} else if (index > this.currentEndIndex) {return false;} else {return true;}});}},methods: {handelLoadmore (currentStartIndex, currentEndIndex) {this.currentStartIndex = currentStartIndex;this.currentEndIndex = currentEndIndex;},getTableData () {let cont = 0;let tableData = [];while (cont < 30000) {cont = cont + 1;let object = {date: cont,name: '王小虎' + cont,address: '上海市普陀区金沙江路 cont 弄'}tableData.push(object);}setTimeout(() => {this.tableData = tableData;}, 2000);}},watch: {}
}
</script><style scoped>
.el-table__body-wrapper .el-table__row td {display: none;
}
.el-table__body-wrapper .el-table__row {height: 38px;
}
</style>

指令代码：

// 设置默认溢出显示数量
var spillDataNum = 20;// 设置隐藏函数
var timeout = false;
let setRowDisableNone = function (topNum, showRowNum, binding) {if (timeout) {clearTimeout(timeout);}timeout = setTimeout(() => {binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);});
};export default {name: 'loadmore',componentUpdated: function (el, binding, vnode, oldVnode) {setTimeout(() => {const dataSize = vnode.data.attrs['data-size'];const oldDataSize = oldVnode.data.attrs['data-size'];if(dataSize === oldDataSize){return;}const selectWrap = el.querySelector('.el-table__body-wrapper');const selectTbody = selectWrap.querySelector('table tbody');const selectRow = selectWrap.querySelector('table tr');if (!selectRow) {return;}const rowHeight = selectRow.clientHeight;let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);const createElementTR = document.createElement('tr');let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);selectTbody.append(createElementTR);// 监听滚动后事件selectWrap.addEventListener('scroll', function () {let topPx = this.scrollTop - spillDataNum * rowHeight;let topNum = Math.round(topPx / rowHeight);let minTopNum = dataSize - spillDataNum - showRowNum;if (topNum > minTopNum) {topNum = minTopNum;}if (topNum < 0) {topNum = 0;topPx = 0;}selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);createElementTR.setAttribute('style', `height: ${createElementTRHeight-topPx > 0 ? createElementTRHeight-topPx : 0}px;`);setRowDisableNone(topNum, showRowNum, binding);})});}
};

全局main.js引用

import loadmore from '@/js/loadmore'
Vue.directive(loadmore.name,loadmore.componentUpdated);

解决ElementUI列表大数据操作卡顿问题相关推荐

vue渲染大量数据优化_vue大数据表格卡顿问题的完美解决方案
前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系 ...
react页面数据过多怎么办_解决 React-Native 加载数据页面卡顿问题
一般情况下,我们在componentDidMount方法里面执行请求数据.根据字面意思:页面组件加载完毕,然后请求数据. 对的 ,没毛病!!! 然而问题就出现,当我们跳转到新页面时,到界面请求完数据, ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
Revit建模｜10种方法帮你解决Revit操作卡顿！
大家好,这里是建模助手. 相信各位BIMer在使用Revit建模时,肯定遇到过软件加载慢或者程序未响应的现象.我们经过测试发现,除了硬件配置及软件本身的问题以外,建模习惯及软件使用方法不当也会造成软件 ...
球球大作战显示中国服务器较差,球球大作战延迟卡顿原因分析及解决方法
球球大作战想必不用说也知道多火了吧,小编周围的朋友都在玩,当然在玩的时候要是卡顿延迟的话就会让游戏体验大打折扣了,那么出现延迟卡顿要怎么解决呢?下面就让小编来告诉你处理的方法. 球球大作战延迟卡顿球 ...
Win11桌面操作卡顿怎么解决
很多朋友的电脑可能是勉强可以运行Win11系统,但是由于Win11采用了全新的桌面设计,许多操作的视觉效果虽然不错,但是感觉有点卡,下面系统之家小编就给朋友们讲讲Win11桌面操作卡顿的解决方法. 解 ...
3DMAX 解决3DMax中处理模型attach操作卡顿问题
3DMax做高精度模型,做CAD等导出模型,减面合并操作时,经常性的出现3Dmax attach操作卡顿现象 1.打开任务管理器,查看实时的cpu . 内存占用,把与开发无关一些高占用程序关闭 2.设 ...
用友u813.0服务器系统,用友U8+ 13.0 登录操作卡顿
用友U8+ 13.0 登录操作卡顿,卡的简直就是没办法用.登录一直转圈圈,进入软件后点击任何模块都是转圈圈.刚开始以为是服务器的问题,查看服务器的资源占用并不高.排查中在这台卡顿的电脑上登录了我的Ma ...
QTableWidget加载大量数据不卡顿
QTableWidget加载大量数据不卡顿解决办法原因解决方案举例说明重新鼠标事件 wheelEvent() 实现方法事件过滤器 eventFilter() 实现方法实现滑动加载总结: ...

解决ElementUI列表大数据操作卡顿问题

解决ElementUI列表大数据操作卡顿问题相关推荐

最新文章

热门文章