vue3项目中实现el-table分批渲染表格

开篇

因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题，在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后，最后决定使用分批渲染来解决该问题。

代码实现

表格代码

<el-table :data="currTableData"borderstyle="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-tooltipstyle="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秒多的时间，可想而知如果一次性渲染几百行几千行，消耗的时间肯定会大大影响用户体验。当然，这种页面性能的优化不仅仅分批渲染一种手段，后面我会持续探索，如果有了新的手段，也会总结成文的。
感谢阅读！