vue3實現(xiàn)el-table分批渲染表格

更新時間：2024年11月11日 09:54:25 作者：藍白界貓晨

這篇文章主要為大家詳細介紹了vue3項目中如何實現(xiàn)el-table分批渲染表格,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

代碼實現(xiàn)

表格代碼

<el-table 
    :data="currTableData"
    border
    style="width: 100%;"
    :max-height="getMaxHeight()"
    :cell-style="CellStyle" 
    @cell-click="handleCellClick"
>
    <!--姓名列-->
    <el-table-column 
        style="background-color: #fff;"
        :align="'center'"
        prop="userName"
        label="姓名"
        width="80"
        fixed/>
    <!--工號-->
    <el-table-column 
        v-for="(item, index) in filteredCfgColumns"
        :key="index"
        style="background-color: #fff;"
        :align="'center'"
        :prop="item.prop"
        :label="item.label"
    />

    <!--
        這一塊牽扯到合并列及周期模式切換后的動態(tài)展示
        需要特殊處理，不要寫死
    -->
    <el-table-column 
        v-for="(date, index) in dateHeaders" 
        :key="index" 
        :align="'center'"
        :class-name="isWeekend(date)"
        :label-class-name="isWeekend(date)"
        :width="getColumnWidth()"
    >
        <!--星期幾/日期-->
        <template #header>
            <div>{{ getWeekDay(date) }}</div>
            <div>{{ parseDate(date) }}</div>
        </template>

        <!--表格內(nèi)容 -->
        <template #default="{row}">
            <div 
                class="cell-content"
                v-if="row[date]"
                :data-cell-content="JSON.stringify(row[date])"
                :class="`${row[date].cellKey}`"
            >
                <!-- 第一行 -->
                <div v-if="pageSettingList.includes('顯示附加班')" class="row"
                    style="font-size: 8px;min-height: 12px; display: flex; align-items: center;">
                    <el-row style="width: 100%;">
                        <el-col :span="24" style="color: red;font-weight: 600;text-align: right;">
                            {{ row[date]?.attchDetail || '' }}
                        </el-col>
                    </el-row>
                </div>
                <!-- 第二行 -->
                <div class="row"
                    style="font-size: 10px;min-height: 20px; display: flex; align-items: center;white-space: nowrap;overflow: hidden;">
                    <el-row style="width: 100%;">
                        <el-col :span="24" style="font-weight: 600;text-align: center;">
                            <StyledText :colorAndSchedules="colorAndSchedules"
                                :styledTexts="row[date]?.mainDetail || ''" />
                        </el-col>
                    </el-row>
                </div>
                <!-- 第三行 -->
                <div class="row"
                    style="font-size: 8px;min-height: 12px; display: flex; align-items: center;">
                    <el-row style="width: 100%;">
                        <el-col :span="6" v-if="pageSettingList.includes('顯示上期排班')"
                            style="display: block;text-align: left;font-weight: 600;color: green;">
                            {{ 'A1' }}
                        </el-col>
                        <el-col :span="12" v-if="pageSettingList.includes('顯示申請班')"
                            style="display: block;text-align: center;font-weight: 600;color: green;">
                            {{ row[date]?.applyDetail || '' }}
                        </el-col>
                        <el-col :span="6" 
                            style="display: block;text-align: left;font-weight: 600;color: green;">  
                            <div class="tip-con">
                                <el-tooltip
                                style="position: absolute!important; right: 0;bottom: 0; color: red; font-size: 12px;" 
                                placement="top" 
                                v-if="isShowRemark(row[date]?.remarkInfo)">
                                    <template #content>
                                        <el-table :data="row[date]?.remarkInfo" style="width: 100%">
                                            <el-table-column prop="shifts" label="班次名" width="180" />
                                            <el-table-column prop="remark" label="備注" width="180" />
                                            <el-table-column prop="type" label="班次類型" />
                                        </el-table>
                                    </template>
                                    <el-icon><InfoFilled /></el-icon>
                                </el-tooltip>
                            </div>
                        </el-col>
                    </el-row>
                </div>                                 
            </div>
        </template>
    </el-table-column>
</el-table>

分批渲染邏輯代碼

定義變量

 startIndex: 0, //開始索引，用于分批渲染的
 batchSize: 6, // 一次性渲染的條數(shù)

分批渲染方法

const currTableData = ref([])

const loadBatch = () => {
   if (state.startIndex < props.tableData.length) {
       const endIndex = Math.min(state.startIndex + state.batchSize, props.tableData.length);
       currTableData.value = currTableData.value.concat(props.tableData.slice(state.startIndex, endIndex));
       state.startIndex = endIndex;
       requestAnimationFrame(loadBatch);
   } 
}

watch(() => props.tableData, newData => {
   currTableData.value = []; // 重置數(shù)據(jù)
   state.startIndex = 0;
   loadBatch()
}, { immediate: true })

效果

注

上面便是分批渲染表格的具體實現(xiàn)方式,可以看到這個表格是相當復雜的，哪怕是使用了分批渲染，第一次也用了6秒多的時間，可想而知如果一次性渲染幾百行幾千行，消耗的時間肯定會大大影響用戶體驗。當然，這種頁面性能的優(yōu)化不僅僅分批渲染一種手段，后面我會持續(xù)探索，如果有了新的手段，也會總結(jié)成文的。

到此這篇關(guān)于vue3實現(xiàn)el-table分批渲染表格的文章就介紹到這了,更多相關(guān)vue3 el-table分批渲染表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: