【Vue】VUE,ElementUI列表大数据卡顿问题？（已解决）

Z时代
2024-01-10
分类：技术分享

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

2019-7-18又优化了一版（后面遇到BUG，就直接更改这个了），相当于重写，用了指令的一些特性；完善了下注释


var EventUtil = {
/*检测绑定事件*/
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element["on" + type] = handler /*直接赋给事件*/
}
},
/*通过removeHandler*/
removeHandler: function (element, type, handler) {
/*Chrome*/
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.deattachEvent) {
/*IE*/
element.deattachEvent('on' + type, handler);
} else {
element["on" + type] = null;
/*直接赋给事件*/
}
}
};
// 设置默认溢出显示数量
var spillDataNum = 5;
// 设置隐藏函数
let timeout = false;
let triggerDataIndexChange = function (el, binding, vnode, oldVnode, currentTableHeight) {
if (timeout) {
clearTimeout(timeout);
}
const elTableBodyWrapper = el.querySelector('.el-table__body-wrapper');
const virtualDiv = elTableBodyWrapper.querySelector('div.virtual-div');
const elTableBody = elTableBodyWrapper.querySelector('table.el-table__body');
const elTableRow = elTableBodyWrapper.querySelector('table tr.el-table__row');
const context = vnode.context;
const tableData = context.tableData;
const elTableBodyWrapperHeight = elTableBodyWrapper.clientHeight;
const elTableRowHeight = elTableRow.clientHeight;
const showRowNum = Math.round(elTableBodyWrapperHeight / elTableRowHeight);
let maxScrollTop = virtualDiv.clientHeight - elTableBodyWrapper.clientHeight - spillDataNum * elTableRowHeight;
// 处理滚动条置顶的情况
if (elTableBodyWrapper.scrollTop === 0) {
context.currentStartIndex = 0;
context.currentEndIndex = tableData.length + spillDataNum;
elTableBody.setAttribute('style', 'transform: translateY(0px);width: ' + elTableBody.style.width + ';');
return;
}
// 处理滚动条滚动中和置低的情况
let scrollTopNum = elTableBodyWrapper.scrollTop / elTableRowHeight;
let currentStartIndex = scrollTopNum;
let currentEndIndex = scrollTopNum + showRowNum + spillDataNum;
if (currentEndIndex - tableData.length >= 0) {
context.currentStartIndex = tableData.length - 1 - showRowNum - spillDataNum;
context.currentEndIndex = tableData.length - 1;
elTableBody.setAttribute('style', 'transform: translateY(' + maxScrollTop + 'px);width: ' + elTableBody.style.width + ';');
return;
}
context.currentStartIndex = currentStartIndex;
context.currentEndIndex = currentEndIndex;
elTableBody.setAttribute('style', 'transform: translateY(' + (elTableBodyWrapper.scrollTop) + 'px);width: ' + elTableBody.style.width + ';');
};
// 滚动条置低
let handleScrollEnd = function (el) {
const elTableBodyWrapper = el.querySelector('.el-table__body-wrapper');
elTableBodyWrapper.scrollTop = elTableBodyWrapper.scrollHeight;
};
export default {
name: 'loadmore',
inserted: function (el, binding, vnode, oldVnode) {
const isLoadmore = vnode.data.attrs['is-loadmore'];
if (isLoadmore === 'NoScrollBar') {
return;
}
const elTableBodyWrapper = el.querySelector('.el-table__body-wrapper');
const elTableBodyWrapperChildren = elTableBodyWrapper.children;
// 创建虚拟DIV，用来设置数据高度，触发滚动条高度更新
const virtualDiv = document.createElement('div');
virtualDiv.setAttribute('class', "virtual-div");
elTableBodyWrapper.appendChild(virtualDiv);
virtualDiv.appendChild(elTableBodyWrapperChildren[0]);
// 滚动事件
let handleMoveScroll = function () {
triggerDataIndexChange(el, binding, vnode, oldVnode);
}
EventUtil.addHandler(elTableBodyWrapper, "scroll", handleMoveScroll);
},
update() {},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 获取组件缓存的数据
const dataSize = vnode.data.attrs['data-size'];
const oldDataSize = oldVnode.data.attrs['data-size'];
const isLoadmore = vnode.data.attrs['is-loadmore'];
const isAddRowData = vnode.data.attrs['is-addRowData'];
// 获取必要的DOM节点
const elTableBodyWrapper = el.querySelector('.el-table__body-wrapper');
const elTableRow = elTableBodyWrapper.querySelector('table tr.el-table__row');
let elTableRowHeight = 0;
if (elTableRow) {
elTableRowHeight = elTableRow.clientHeight;
}
if (elTableRowHeight === 0) {
elTableRowHeight = 25;
}
// 如果是设置不需要滚动条的模式，直接显示所有数据，并设置表格的高度为数据的高度
if (isLoadmore === 'NoScrollBar') {
const context = vnode.context;
let tableHeight = (dataSize + 1) * elTableRowHeight + 40;
context.currentTableHeight = tableHeight;
return;
}
if (dataSize) {
// 根据行高计算当前应该显示那些数据
// 根据数据多少和行高设置虚拟滚动DIV的高度
const virtualDiv = elTableBodyWrapper.querySelector('div.virtual-div');
const virtualDivHeight = dataSize * elTableRowHeight;
virtualDiv.setAttribute('style', `height: ${virtualDivHeight}px;`);
// 首次进来，即currentStartIndex为零，如果可显示区域大于默认显示20条数据。要重新赋值默认显示的数量为显示区域的数量加上默认溢出的数量
const bodyHeight = vnode.componentInstance.layout.height;
const showRowNum = Math.round(bodyHeight / elTableRowHeight);
const currentStartIndex = vnode.context.currentStartIndex;
const currentEndIndex = vnode.context.currentEndIndex;
if (currentStartIndex === 0 && bodyHeight && showRowNum > currentEndIndex) {
vnode.context.currentEndIndex = showRowNum + spillDataNum;
}
}
// 新增数据处理，直接将滚动条置底
if (isAddRowData) {
handleScrollEnd(el);
}
}
};

问题描述

很早之前的问题，后来根据网友的回答，又优化了一些版本。今天整理下，感谢寻梦无痕提供的帮助

场景

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

现状

已解决3000条数据点击其他DOM操作卡顿的问题。

求助

助如何解决初次放入数据时卡顿的情况？（内附解决加载完成后卡顿的思路）**

结果分享

优化了大概三个版本，保留第一次的分享的，后面直接贴出最终版
解决3000条数据点击其他DOM操作卡顿的思路
通过指令添加表格滚动后的事件，设置非显示区域的其他DOM节点隐藏。

指令代码

// 设置隐藏函数
var timeout = false;
let setRowDisableNone = function (selectRows, topNum, rowHeight, showRowNum) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
selectRows.forEach((selectRow, index) => {
const selectRowsTds = selectRow.querySelectorAll('td');
if (topNum <= index && index <= (topNum + showRowNum)) {
selectRowsTds.forEach((selectRowsTd) => {
selectRowsTd.style.display = '';
});
} else {
selectRow.style.height = `${rowHeight}px`;
selectRowsTds.forEach((selectRowsTd) => {
selectRowsTd.style.display = 'none';
});
}
});
}, 100);
};
export default {
name: 'loadmore',
componentUpdated: function (el) {
setTimeout(() => {
const selectWrap = el.querySelector('.el-table__body-wrapper');
const selectRow = selectWrap.querySelector('table tr');
const rowHeight = selectRow.clientHeight;
const selectRows = selectWrap.querySelectorAll('table tr');
setRowDisableNone(selectRows, 0, rowHeight, showRowNum);
// 监听滚动事件，操作DOM隐藏和显示
selectWrap.addEventListener('scroll', function () {
let topPx = this.scrollTop;
let topNumber = Math.round(topPx / rowHeight);
let rowTopLastIndex = topNumber;
setRowDisableNone(selectRows, rowTopLastIndex, rowHeight, showRowNum);
})
});
}};

有同学说componentUpdated执行不了，这个我是通过指令做的，后面我贴出完成的代码和例子

解决性能问题(最终版)

参考评论区寻梦无痕分享的例子，整合以下，感谢。

思路

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

Element Table代码

<template>
<div>
<el-table border :data="filteredData" 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>{{ 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>{{ 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>{{ 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>{{ 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);
})
});
}};