当前位置：首页 > news >正文

天门市网站建设seo淘宝指数官网入口

news 2025/7/19 20:25:07

天门市网站建设seo,淘宝指数官网入口,深圳市做网站的,做外贸的网站公司开篇因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题，在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后，最后决定使用分批渲染来解决该问题。代码实现表格代码 <el-table :data"currTableData"borderstyle"wi…

开篇

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

代码实现

表格代码

<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 })