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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463638.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率 1.简述 在使用Three.js做数字孪生应用场景时&#xff0c;我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时&#xff0c;每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等&#xff0c;会极大…

【HarmonyOS】引导用户跳转APP设置详情页开启权限

【HarmonyOS】引导用户跳转设置APP详情页开启权限 前言 众所周知在鸿蒙应用中&#xff0c;向用户申请权限时&#xff0c;会弹出系统请求授权的弹框。当用户拒绝了你申请的权限&#xff0c;弹框会直接关闭。当下次触发同样的权限申请&#xff0c;会直接返回失败&#xff0c;不…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

MySQL分区表(二)

说明&#xff1a;之前有写过一篇博客&#xff0c;介绍MySQL如何建立分区表&#xff0c;本文介绍如何建立子分区表。子分区&#xff0c;就是在原来分区的基础上&#xff0c;再嵌套一个分区。 例如&#xff0c;按照记录的创建时间分区&#xff0c;在此基础上&#xff0c;再按照租…

一文弄懂Bert模型

01 引言 计算机一直难以理解语言&#xff0c;其中一个重要原因就是该任务需要更基本的语言语境。每个 NLP 任务都可以通过使用为每个任务创建的单独模型来解决。 2018 年&#xff0c;谷歌发布了论文BERT&#xff0c;旨在对模型进行预训练&#xff0c;这样就可以通过增加不同…

HTML5实现小鸟过管道小游戏源码

文章目录 1.设计来源1.1 主界面1.2 游戏中主界面1.3 游戏结束界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/…

Linux·进程控制(system V)

1. 共享内存 system V共享内存是最快的IPC形式&#xff0c;之前的管道是基于Linux内核开发的通讯方案&#xff0c;其读写接口都是现成的&#xff0c;因此内核设计者为了完成进程间通讯任务并不需要新增太多代码。而共享内存属于system V标准&#xff0c;是操作系统单独…

【Python+Pycharm】2024-Python安装配置教程

【PythonPycharm】2024-Python安装配置教程 一、下载装 Python 1、进入Python官网首页&#xff0c;下载最新的Python版本 Download Python | Python.org 选择对应版本下载 安装 测试安装情况 python如果安装失败 在系统环境变量添加安装路径 where pythonwin7安装路径添加…

文献阅读 11.3

文献阅读 Physics-informed neural networks for hydraulic transient analysis in pipeline systems (基于物理信息的管道系统水力瞬态分析神经网络) 一、文献摘要 该文献提出了一种新的基于物理和数据驱动的定向瞬态压力重建方法&#xff0c;无需建立完整的管道系统模型。…

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器&#xff0c;一个定时0.1秒计时&#xff0c;另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…

气膜冰雪项目:推动冰雪运动发展的新纪元—轻空间

随着2024年北京冬奥会的余温仍在延续&#xff0c;气膜冰雪项目在我国的冰雪运动发展中扮演着愈发重要的角色。气膜结构以其独特的优势&#xff0c;正吸引着越来越多的参与者&#xff0c;推动着冰雪运动的普及与发展。 突出的优势 气膜冰雪馆的设计理念充分体现了现代建筑的灵活…

市场分化!汽车零部件「变天」

全球汽车市场的动荡不安&#xff0c;还在持续。 本周&#xff0c;全球TOP20汽车零部件公司—安波福&#xff08;Aptiv&#xff09;发布2024年第三季度财报显示&#xff0c;三季度公司经调整后确认收入同比下降6%&#xff1b;按照区域市场来看&#xff0c;也几乎是清一色的下滑景…

ES6中数组新增了哪些扩展?

ES6中数组新增了哪些扩展&#xff1f; 1、扩展运算符的应⽤ ES6通过扩展元素符 … &#xff0c;好⽐ rest 参数的逆运算&#xff0c;将⼀个数组转为⽤逗号分隔的参数序列 console.log(...[1, 2, 3]) // 1 2 3 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...documen…

基于物联网的户外环境检测装置教学文章

引言 随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;越来越多的应用被广泛研究和应用于我们的日常生活中。户外环境检测装置是一种利用传感器、网络连接和数据分析技术&#xff0c;监测和分析环境数据&#xff08;如温度、湿度、空气质量等&#xff09;的设备。…

ubuntu20安装opencv3.2记录

系统环境 ubuntu20安装了ros-noetic&#xff0c;所以系统默认装了opencv4.2.0&#xff0c;但是跑fastlivo推荐的是opencv3.2.0&#xff0c;而且海康相机别人写的ros驱动&#xff08;海康相机ros驱动&#xff09;也是需要opencv3.2.0&#xff0c;最终还是选择安装多版本的openc…

全!新!LLM推理加速调研

本文主要内容 介绍一篇大模型推理加速综述论文&#xff0c;简单说明了LLM推理加速的基本内容。 介绍了推理阶段的prefilling&#xff08;主要方向&#xff1a;计算优化&#xff09;和decoding&#xff08;主要方向&#xff1a;内存优化&#xff09;差异。 prefilling优化方面…

大数据-206 数据挖掘 机器学习理论 - 多元线性回归 回归算法实现 算法评估指标

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Python+Appium+Pytest+Allure自动化测试框架-安装篇

文章目录 安装安装ADT安装NodeJs安装python安装appium安装Appium Server&#xff08;可选&#xff09;安装Appium-Inspector&#xff08;可选&#xff09;安装allure安装pytest PythonAppiumPytestAllure框架的安装 Appium是一个开源工具&#xff0c;是跨平台的&#xff0c;用于…

Nature Methods | 新型三维光场显微成像技术

欢迎关注GZH《光场视觉》 近日&#xff0c;中科院脑科学与智能技术卓越创新中心王凯研究组在《自然方法》&#xff08;Nature Methods&#xff09;上&#xff0c;在线发表了题为Volumetric Voltage Imaging of Neuronal Populations in Mouse Brain by Confocal Light Field M…

深度学习基础—循环神经网络的梯度消失与解决

引言 深度学习基础—循环神经网络&#xff08;RNN&#xff09;https://blog.csdn.net/sniper_fandc/article/details/143417972?fromshareblogdetail&sharetypeblogdetail&sharerId143417972&sharereferPC&sharesourcesniper_fandc&sharefromfrom_link深…