前言
提示：這里可以添加本文要記錄的大概內(nèi)容：
在element-plus中，如果數(shù)據(jù)超過(guò)1k，就會(huì)感覺(jué)到明顯的卡頓，應(yīng)該是渲染的卡頓吧。反正我在請(qǐng)求回來(lái)接口之后，loading，會(huì)卡頓。用戶體驗(yàn)十分不佳。然后吧，這個(gè)列表還不能分頁(yè)，得全部展示出來(lái)，因?yàn)樵O(shè)計(jì)的，不能改，上面要求。。。
好吧，現(xiàn)在開(kāi)始優(yōu)化~
（一定要說(shuō)一句，我們項(xiàng)目的分頁(yè)一般都是前端做的分頁(yè)，感覺(jué)體驗(yàn)十分不佳，為什么就不好好的后端分頁(yè)尼，因?yàn)檎f(shuō)不過(guò)）
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、卡頓的原因？
請(qǐng)求接口返回之后，關(guān)閉loading，但是界面并沒(méi)有及時(shí)的關(guān)閉，這個(gè)問(wèn)題，應(yīng)該是有什么阻塞了，開(kāi)始定位，發(fā)現(xiàn)，應(yīng)該是界面中的一個(gè)長(zhǎng)列表沒(méi)有進(jìn)行懶加載優(yōu)化，導(dǎo)致渲染DOM，花費(fèi)了太長(zhǎng)的時(shí)間。然后kakaka
二、解決
1、滾動(dòng)懶加載
代碼如下（示例）：
<el-table
id="lazyLoad"
:data="showDataL"
:max-height="temp_len_l">
...
</el-table>
/**
* @desc table懶加載
*/
const lazyLoading = () => {
// 這個(gè)地方就是為了得到滾動(dòng)的那個(gè)元素，大家隨意
let dom = document.getElementById("lazyLoad");
let scrollDOM = dom.querySelector(".el-scrollbar__wrap");
scrollDOM.addEventListener("scroll", (v) => {
const scrollDistance = scrollDOM.scrollHeight - scrollDOM.scrollTop - scrollDOM.clientHeight;
if (scrollDistance <= 1) {
if (pagination.page < pagination.totalPage) {//當(dāng)前頁(yè)數(shù)小于總頁(yè)數(shù)就重新設(shè)置table的數(shù)據(jù)
pagination.page++; //當(dāng)前頁(yè)數(shù)自增
console.log(
"頁(yè)面已經(jīng)到達(dá)底部,可以重新設(shè)置table數(shù)據(jù),現(xiàn)在是加載第 " + pagination.page +" 頁(yè)數(shù)據(jù)"
);
showDataL.value = dataL.value.slice(0, pagination.page * 20)
}
}
});
};
onMounted(() => {
lazyLoading();
});
2.官方
官方有一個(gè)虛擬表格，目前孩子啊測(cè)試階段，大家也可以嘗試一下，我就不貼出來(lái)了
點(diǎn)擊進(jìn)入
總結(jié)
提示：這里對(duì)文章進(jìn)行總結(jié)：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-732825.html
長(zhǎng)列表性能優(yōu)化，主打一個(gè)減少DOM元素的一次性渲染加載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-732825.html
到了這里，關(guān)于【性能優(yōu)化】虛擬懶加載（下拉滾動(dòng)加載長(zhǎng)列表）element-puls+el-table的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
