开篇
因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题,在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后,最后决定使用分批渲染来解决该问题。
代码实现
表格代码
<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"
/>
<!--
这一块牵扯到合并列及周期模式切换后的动态展示
需要特殊处理,不要写死
-->
<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>
<!--表格内容 -->
<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, // 一次性渲染的条数
- 分批渲染方法
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 = []; // 重置数据
state.startIndex = 0;
loadBatch()
}, { immediate: true })
效果
注
上面便是分批渲染表格的具体实现方式,可以看到这个表格是相当复杂的,哪怕是使用了分批渲染,第一次也用了6秒多的时间,可想而知如果一次性渲染几百行几千行,消耗的时间肯定会大大影响用户体验。当然,这种页面性能的优化不仅仅分批渲染一种手段,后面我会持续探索,如果有了新的手段,也会总结成文的。
感谢阅读!