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

news2024/11/5 3:42:56

开篇

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

代码实现

表格代码

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode:82. 删除排序链表中的重复元素 II(重复的一个都不保留)

目录 题目描述: 代码: 第一种: 第二种: 题目描述: 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2…

偏差与方差的基本概念

在机器学习中&#xff0c;Bias-Variance Tradeoff&#xff08;偏差-方差权衡&#xff09; 是一个核心概念&#xff0c;帮助我们理解模型的误差来源以及如何调节模型复杂度以达到更好的泛化性能。在这篇博客中&#xff0c;我们将深入讨论什么是偏差和方差&#xff0c;以及如何平…

0-ARM Linux驱动开发-字符设备

一、字符设备概述 Linux 系统中&#xff0c;设备被分为字符设备、块设备和网络设备等。字符设备以字节流的方式进行数据传输&#xff0c;数据的访问是按顺序的&#xff0c;一个字节一个字节地进行读取和写入操作&#xff0c;没有缓冲区。例如&#xff0c;终端&#xff08;/dev…

HTML 基础标签——表格标签<table>

文章目录 1. `<table>` 标签:定义表格2. `<tr>` 标签:定义表格行3. `<th>` 标签:定义表头单元格4. `<td>` 标签:定义表格单元格5. `<caption>` 标签:为表格添加标题6. `<thead>` 标签:定义表格头部7. `<tbody>` 标签:定义表格…

【优选算法】——二分查找!

目录 1、二分查找 2、在排序数组中查找元素的第一个和最后一个位置 3、搜索插入位置 4、x的平方根 5、山脉数组的封顶索引 6、寻找峰值 7、寻找旋转排序数组中的最小值 8、点名 9、完结散花 1、二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组…

东北虎豹国家公园shp格式范围

东北虎豹国家公园地处中国吉林、黑龙江两省交界的老爷岭南部&#xff08;珲春—汪清—东宁—绥阳&#xff09;区域&#xff0c;东起吉林省珲春林业局青龙台林场&#xff0c;与俄罗斯滨海边疆区接壤&#xff0c;西至吉林省大兴沟林业局岭东林场&#xff0c;南自吉林省珲春林业局…

Spring 中的 Environment 对象

可参考官网&#xff1a;Environment Abstraction 核心概念 Environment 对象对两个关键方面进行建模&#xff1a;profiles 和 属性&#xff08;properties&#xff09;。 Profile 简单来说&#xff1a;profile 机制在 IOC 容器中提供了一种机制&#xff1a;允许在不同的环境…

Puppeteer点击系统:解锁百度流量点击率提升的解决案例

在数字营销领域&#xff0c;流量和搜索引擎优化&#xff08;SEO&#xff09;是提升网站可见性的关键。我开发了一个基于Puppeteer的点击系统&#xff0c;旨在自动化地提升百度流量点击率。本文将介绍这个系统如何通过模拟真实用户行为&#xff0c;优化关键词排名&#xff0c;并…

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开&#xff0c;主要内容包括什么是UI自动化&#xff0c;常用的UI自动化框架&#xff0c;UI自动化原理等。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题…

[Android]从FLAG_SECURE禁止截屏看surface

在应用中&#xff0c;设置activity的flag为FLAG_SECURE就可以禁止截屏&#xff0c;截屏出来是黑色的&#xff0c; 试验一下&#xff0c; 注意事项 影响&#xff1a; 设置 FLAG_SECURE 标志后&#xff0c;用户将无法对该Activity进行截屏或录制屏幕。这个标志会影响所有屏幕录…

设计模式之模块方法

定义 模板与方法应该是最常使用的设计模式&#xff0c;在GOF&#xff08;设计模式&#xff09;中的定义&#xff1a;定义一个操作中的算法的骨架 &#xff0c;而将一些步骤延迟到子类中。 Template Method使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 …

深度学习之降维和聚类

1 降维和聚类 1.1 图解为什么会产生维数灾难 ​ 假如数据集包含10张照片&#xff0c;照片中包含三角形和圆两种形状。现在来设计一个分类器进行训练&#xff0c;让这个分类器对其他的照片进行正确分类&#xff08;假设三角形和圆的总数是无限大&#xff09;&#xff0c;简单的…

uni-app 下拉刷新、 上拉触底(列表信息)、 上滑加载(短视频) 一键搞定

一、下拉刷新 1. 首先找到pages.json中 给需要进行下拉刷新的页面设置可以下拉刷新 2. 然后在需要实现下拉刷新的script标签内添加 导入onPullDownRefresh import {onPullDownRefresh} from dcloudio/uni-app 下拉刷新触发的事件 onPullDownRefresh(()> {console.log(正…

AprilTag在相机标定中的应用简介

1. AprilTag简介 相机标定用的标靶类型多样,常见的形式有棋盘格标靶和圆形标靶。今天要介绍的AprilTag比较特别,它是一种编码形式的标靶。其官网为AprilTag,它是一套视觉基准系统,包含标靶编解码方法(Tag生成)和检测算法(Tag检测),可用于AR、机器人、相机标定等领域。…

stm32入门教程--USART外设 超详细!!!

目录 简介 什么是UART&#xff1f; 什么是USART&#xff1f; 简介 USART&#xff08;Universal Synchron /Asynchronous Receiver /Transmitter&#xff09;通用同步/异步收发器 1、USART是STM32内部集成的硬件外设&#xff0c;可根据数据寄存器的一个字节数据自动生成数据帧…

ubuntu20.04 加固方案-设置重复登录失败后锁定时间限制

一、编辑PAM配置文件 打开终端。 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/pam.d/common-auth文件。 sudo vim /etc/pam.d/common-auth 二、添加配置参数 在打开的配置文件中&#xff0c;添加或修改以下参数&#xff1a; auth required pam_tally2.so deny5 un…

Linux操作系统指令(部分)

Linux操作系统 要求如下&#xff1a; 1、查看/etc/passwd文件的第18-20行内容&#xff0c;并将找到的内容存储至/home/passwd文件中 2、查找/etc/passwd文件中包含root字符的行并将找到的行存储至/root/passwd文件中 3、将/home目录复制到/root目录 4、将/root/home目录&a…

钉子户绷不住了,Win 10正式改为「付费续命」模式

众所周知&#xff0c;「终止支持」是所有 Windows 版本早已既定又让人非常操蛋的最终归宿。 当微软认为一代操作系统已完成其生命周期使命的那一刻&#xff0c;便会毫不犹豫地宣告它的死期。 Windows 系统一旦结束支持&#xff0c;微软将不会再提供任何技术维护和安全更新。 …

C++ | Leetcode C++题解之第528题按权重随机选择

题目&#xff1a; 题解&#xff1a; class Solution { private:mt19937 gen;uniform_int_distribution<int> dis;vector<int> pre;public:Solution(vector<int>& w): gen(random_device{}()), dis(1, accumulate(w.begin(), w.end(), 0)) {partial_sum(…

Grafana+Prometheus监控篇-Nginx

一、监控exporter安装 ①、下载地址 nginx-exporter 这里是Windows下监控&#xff0c;选择amd64. ②、nginx-exporter配置 打开nginx的配置文件nginx.conf,启用nginx的基本状态. server {listen 8088;location /status {stub_status;allow 127.0.0.1; deny all;}} ③…