快捷導(dǎo)航

Element-plus表格數(shù)據(jù)延遲加載的實(shí)現(xiàn)方案

更新時(shí)間：2024年11月23日 11:06:28 作者：AI六月

本文介紹了在前端展示大量數(shù)據(jù)時(shí)遇到的加載卡頓問題,并提供了一種解決方案：延遲加載,具體做法是設(shè)置加載數(shù)量,對(duì)于數(shù)據(jù)量較大的情況,進(jìn)行分批加載數(shù)據(jù),通過類選擇器找到表格滾動(dòng)條并進(jìn)行監(jiān)聽綁定事件,感興趣的朋友跟隨小編一起看看吧

在前端展示數(shù)據(jù)量過大的表格時(shí)，會(huì)出現(xiàn)加載卡頓問題。

目前業(yè)務(wù)場(chǎng)景（加載數(shù)據(jù)量過五萬(wàn)條的數(shù)據(jù)在表格中展示）

解決方案：延遲加載，設(shè)置加載數(shù)量，首先加載展示一定數(shù)量的數(shù)據(jù)，監(jiān)聽表格的滾動(dòng)條事件，當(dāng)滾動(dòng)到可視化數(shù)據(jù)量的最底部觸發(fā)再加載數(shù)據(jù)事件

展示效果圖：

當(dāng)滾動(dòng)到前一次加載的數(shù)據(jù)量結(jié)束后，觸發(fā)再加載事件。如圖

上代碼：

<el-table class="scrollbar" :data="tableData" border
                                style="width: 700px; height: 260px; font-size: 12px; margin-left: 20px;"
                                @header-click="handleTableClick">
                                <el-table-column prop="x" label="x" />
                                <el-table-column prop="壓強(qiáng)" label="壓強(qiáng)" />
                                <el-table-column prop="馬赫數(shù)" label="馬赫數(shù)" />
                                <el-table-column prop="溫度" label="溫度" />
                                <el-table-column prop="速度" label="速度" />
                                <el-table-column prop="燃?xì)饷芏? label="燃?xì)饷芏? />
                            </el-table>
                            <div style="text-align: center; font-size: 12px; color: #969292;">{{ loadDataMesssage }}</div>

其中，添加類選擇器 class="scrollbar"，主要作用是方便找到對(duì)應(yīng)表格的滾動(dòng)條

let data: any = [];
let data2: any = [];
let data3: any = [];
let data4: any = [];
let data5: any = [];
// 當(dāng)前已加載的數(shù)據(jù)量
let loadedDataCount = 0;
const scrollTableDom = ref();
const loadDataMesssage = ref('');
const loadData = () => {
    if (data.length < 500) {
        const data1: TableDataType[] = [];
        for (let i = 0; i < data.length; i++) {
            data1.push({
                'x': data[i].x.toFixed(4),
                '壓強(qiáng)': data[i].p.toFixed(4),
                '馬赫數(shù)': data2[i].mach.toFixed(4),
                '溫度': data3[i].temperature.toFixed(4),
                '速度': data4[i].velocity.toFixed(4),
                '燃?xì)饷芏?: data5[i].density.toFixed(4)
            });
        }
        tableData.value = data1;
    } else {
        scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
        if (scrollTableDom.value) {
            scrollTableDom.value.addEventListener("scroll", handleScroll);
        }
        const batchSize = Math.floor(data.length / 50); // 每次加載的數(shù)據(jù)量
        const newData = [];
        for (let i = loadedDataCount; i < loadedDataCount + batchSize && i < data.length; i++) {
            newData.push({
                'x': data[i].x.toFixed(4),
                '壓強(qiáng)': data[i].p.toFixed(4),
                '馬赫數(shù)': data2[i].mach.toFixed(4),
                '溫度': data3[i].temperature.toFixed(4),
                '速度': data4[i].velocity.toFixed(4),
                '燃?xì)饷芏?: data5[i].density.toFixed(4)
            });
        }
        loadedDataCount += batchSize;
        tableData.value = [...tableData.value, ...newData];
    }
};
const handleScroll = (event: any) => {
    const target = event.target;
    const scrollContainer = target;
    const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
    if (scrollPosition <= 0 && loadedDataCount < data.length) {
        console.log('滾動(dòng)到底部了，加載更多數(shù)據(jù)');
        loadDataMesssage.value = '正在加載...';
        loadData();
    } else if (scrollPosition === 0 && loadedDataCount >= data.length) {
        console.log('數(shù)據(jù)為空，無法加載更多數(shù)據(jù)');
        loadDataMesssage.value = '已經(jīng)到底了';
    } else {
        loadDataMesssage.value = '';
    }
};

我在這里設(shè)置了兩種加載方式，當(dāng)數(shù)據(jù)量少于500條時(shí)，就直接賦值給表格，不會(huì)出現(xiàn)打開表格卡頓，當(dāng)數(shù)據(jù)量大于500條時(shí)，進(jìn)行分批加載數(shù)據(jù)。

通過類選擇器找到表格滾動(dòng)條并進(jìn)行監(jiān)聽綁定事件，handleScroll

 scrollTableDom.value = document.querySelector('.scrollbar .el-table__body-wrapper .el-scrollbar__wrap');
        if (scrollTableDom.value) {
            scrollTableDom.value.addEventListener("scroll", handleScroll);
        }

const handleScroll = (event: any) => {
    const target = event.target;
    const scrollContainer = target;
    const scrollPosition = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
    if (scrollPosition <= 0 && loadedDataCount < data.length) {
        console.log('滾動(dòng)到底部了，加載更多數(shù)據(jù)');
        loadDataMesssage.value = '正在加載...';
        loadData();
    } else if (scrollPosition === 0 && loadedDataCount >= data.length) {
        console.log('數(shù)據(jù)為空，無法加載更多數(shù)據(jù)');
        loadDataMesssage.value = '已經(jīng)到底了';
    } else {
        loadDataMesssage.value = '';
    }
};

到此這篇關(guān)于Element-plus表格數(shù)據(jù)延遲加載的文章就介紹到這了,更多相關(guān)Element-plus延遲加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: