中山中小型网站,网站友情链接作用,国家住建网查企业资质,页面菜单 wordpress开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题#xff0c;在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后#xff0c;最后决定使用分批渲染来解决该问题。 代码实现
表格代码
el-table :datacurrTableDataborderstylewi…开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后最后决定使用分批渲染来解决该问题。 代码实现
表格代码
el-table :datacurrTableDataborderstylewidth: 100%;:max-heightgetMaxHeight():cell-styleCellStyle cell-clickhandleCellClick
!--姓名列--el-table-column stylebackground-color: #fff;:aligncenterpropuserNamelabel姓名width80fixed/!--工号--el-table-column v-for(item, index) in filteredCfgColumns:keyindexstylebackground-color: #fff;:aligncenter:propitem.prop:labelitem.label/!--这一块牵扯到合并列及周期模式切换后的动态展示需要特殊处理不要写死--el-table-column v-for(date, index) in dateHeaders :keyindex :aligncenter:class-nameisWeekend(date):label-class-nameisWeekend(date):widthgetColumnWidth()!--星期几/日期--template #headerdiv{{ getWeekDay(date) }}/divdiv{{ parseDate(date) }}/div/template!--表格内容 --template #default{row}div classcell-contentv-ifrow[date]:data-cell-contentJSON.stringify(row[date]):class${row[date].cellKey}!-- 第一行 --div v-ifpageSettingList.includes(显示附加班) classrowstylefont-size: 8px;min-height: 12px; display: flex; align-items: center;el-row stylewidth: 100%;el-col :span24 stylecolor: red;font-weight: 600;text-align: right;{{ row[date]?.attchDetail || }}/el-col/el-row/div!-- 第二行 --div classrowstylefont-size: 10px;min-height: 20px; display: flex; align-items: center;white-space: nowrap;overflow: hidden;el-row stylewidth: 100%;el-col :span24 stylefont-weight: 600;text-align: center;StyledText :colorAndSchedulescolorAndSchedules:styledTextsrow[date]?.mainDetail || //el-col/el-row/div!-- 第三行 --div classrowstylefont-size: 8px;min-height: 12px; display: flex; align-items: center;el-row stylewidth: 100%;el-col :span6 v-ifpageSettingList.includes(显示上期排班)styledisplay: block;text-align: left;font-weight: 600;color: green;{{ A1 }}/el-colel-col :span12 v-ifpageSettingList.includes(显示申请班)styledisplay: block;text-align: center;font-weight: 600;color: green;{{ row[date]?.applyDetail || }}/el-colel-col :span6 styledisplay: block;text-align: left;font-weight: 600;color: green; div classtip-conel-tooltipstyleposition: absolute!important; right: 0;bottom: 0; color: red; font-size: 12px; placementtop v-ifisShowRemark(row[date]?.remarkInfo)template #contentel-table :datarow[date]?.remarkInfo stylewidth: 100%el-table-column propshifts label班次名 width180 /el-table-column propremark label备注 width180 /el-table-column proptype label班次类型 //el-table/templateel-iconInfoFilled //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秒多的时间可想而知如果一次性渲染几百行几千行消耗的时间肯定会大大影响用户体验。当然这种页面性能的优化不仅仅分批渲染一种手段后面我会持续探索如果有了新的手段也会总结成文的。 感谢阅读
