element table数据量太大,造成浏览器崩溃。解决方案

这是渲染出来的数据

在这里插入图片描述

其实解决思路大致就是:把后台返回的上万条数据,进行分割(前端分页),这样先加载几十条,然后再用懒加载的方式去concat,完美解决

上代码

<template><div class="home-contianer"><el-tablev-loading="loading":data="tableList"ref="containerTable"borderstripev-loadmore="loadmore":height="scrollerHeight":header-cell-style="{ backgroundColor: '#E4E4E4', color: '#000000' }"><el-table-columnlabel="序号"align="center"prop="index"width="50"fixed/><el-table-columnlabel="部门"align="left"prop="deptName"width="100"fixed/><el-table-columnlabel="仓库"align="left"prop="wareName"width="200"fixed/></el-table></div>
</template><script>
export default {data() {return {dataList: [],loading: false,resourceTotal: 0,resourceNum: 1,resourcePage: 20,tableList: []};},directives: {loadmore: {bind(el, binding) {const selectWrap = el.querySelector(".el-table__body-wrapper");selectWrap.addEventListener("scroll", function() {const scrollDistance =this.scrollHeight - this.scrollTop - this.clientHeight;// 判断是否到底,scrollTop为已滚动到元素上边界的像素数,scrollHeight为元素完整的高度,clientHeight为内容的可见宽度if (scrollDistance <= 10) {binding.value();}});}}},computed: {// 滚动区高度scrollerHeight: function() {return window.innerHeight - 200 + "px"; //自定义高度需求}},created() {this.getList();},methods: {getList() {this.loading = true;for (let index = 0; index < 100000; index++) {let obj = {index: index,deptName: index + "deptName",wareName: "wareName" + index};this.dataList.push(obj);}this.tableList = this.dataList.slice(0, this.resourcePage);this.resourceTotal = this.tableList.length;this.resourceNum = 1;this.loading = false;},//懒加载loadmore() {this.resourceNum++;this.searchLoadResource();},searchLoadResource() {let result = [];if (this.resourcePage * this.resourceNum < this.dataList.length) {result = this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.resourcePage * this.resourceNum);} else {result = this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.dataList.length);}this.resourceTotal = result.length;this.tableList = this.tableList.concat(result);}}
};
</script>
<style></style>

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

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

相关文章

c语言经典测试题6

1.题1 void print(char* s) {if (*s){print(s);printf("%c", *s);} } #include<stdio.h> int main() {char str[] "Geneius";print(str);return 0; } 上述代码是一个递归&#xff0c;那么它运行的结果是什么呢&#xff1f; 我们来分析一下&#x…

跨区域复制建筑UI输入框脚本迷你世界

--复制区域文件 --设置坐标起点&#xff0c;终点 --创建区域 --获取坐标id,data --星空露珠工作室制作 local pos1{x-16,y7,z28} local pos2{x28,y44,z-9} local block{num0} local str{} local str0{} local num0 local count0 local ui6 --几个输入框 local romath.random(…

centos将sh文件设置为开机自动执行

一、先创建一个sh文件 vim redis-6.0.3.sh 这个是redis执行的sh脚本内容 #!/bin/sh # chkconfig: 2345 80 90 # Simple Redis init.d script conceived to work on Linux systems # as it does use of the /proc filesystem. REDISPORT7000 # 对应redis.conf文件的端口 E…

探索创意的无尽宇宙——Photoshop 2020,你的视觉魔法棒

在数字艺术的广阔天地中&#xff0c;Photoshop 2020无疑是一颗璀璨的明星。这款由Adobe公司精心打造的图像处理软件&#xff0c;自推出以来&#xff0c;便以其强大的功能和卓越的性能&#xff0c;赢得了全球数百万设计师、摄影师和爱好者的青睐。无论是Mac还是Windows系统&…

K8S安装部署

常见的K8S安装部署方式 Minikube Minikube是一个工具&#xff0c;可以在本地快速运行一个单节点微型K8S&#xff0c;仅用于学习、预览K8S的一些特性使用。 部署地址&#xff1a;Install Tools | Kubernetes Kubeadm Kubeadm也是一个工具&#xff0c;提供kubeadm init和kube…

k8s部署 多master节点负载均衡以及集群高可用

一、k8s 添加多master节点实验 1、master02节点初始化操作 2、在master01节点基础上&#xff0c;完成master02节点部署 ①从master01节点复制所需要的文件 需要从master01节点复制etcd数据库所需要的ssl证书、kubernetes安装目录&#xff08;二进制文件、组件与apiserver通信…

视频推流、视频处理、拉流、手机预览演示

视频推流、视频处理、拉流、手机预览演示 版本信息操作步骤搭建rtmp服务安装pingos配置nginx(/usr/local/pingos/conf/nginx.conf) http端口为:8081启动nginx服务搭建rtmp鉴权和启动视频处理的服务下载ffmpeg用于拉流、视频处理、推流rtmp推流服务的鉴权服务代码(rtmp_auth_srv…

优化进化算法

基本概念 进化算法&#xff08;Evolutionary Algorithms, EAs&#xff09;是受自然选择和生物进化机制启发而发展起来的一类优化算法。它们使用模拟生物进化的技术来解决复杂的优化问题&#xff0c;其核心思想是通过选择&#xff08;Selection&#xff09;、遗传&#xff08;C…

海外KOL合作指南:如何专业询价并成功建立合作关系?

近几年&#xff0c;随着社交媒体的迅速发展&#xff0c;与海外KOL合作已成为许多企业推广业务的有效手段。海外KOL具有庞大的粉丝基础和广泛的影响力&#xff0c;与他们合作可以帮助企业扩大品牌知名度、提高产品销售等方面取得显著成果。然而&#xff0c;如何向海外KOL询价&am…

与web3.0有关的科技热词的提问和SmartChat给出的回答

Q1. 请解释热词&#xff1a;元宇宙、web3.0、区块链、去中心化、比特币、以太坊、智能合约、NFT、EOS、DAO、Defi、Gamefi、Altcoin 当代科技领域出现了许多热门词汇&#xff0c;以下是这些词汇的解释&#xff1a; 元宇宙&#xff08;Metaverse&#xff09;&#xff1a;元宇…

123123132

GAaFWqDgpYHctHlalFiAGwnyLfjWSFiYNZyGU

R语言【base】——writeLines()

Package base version 4.2.0 Description 向连接写入文本行。 Usage writeLines(text, con stdout(), sep "\n", useBytes FALSE) Arguments 参数【text】&#xff1a;一个字符向量。 参数【con】&#xff1a;一个 connection 对象 或 一个字符串。 参数【se…

设计模式学习笔记 - 面向对象 - 8.实践:贫血模型和充血模型的原理及实践

1.Web开发常用的贫血MVC架构违背OOP吗&#xff1f; 前面我们依据讲过了面向对象四大特性、接口和抽象类、面向对象和面向过程编程风格&#xff0c;基于接口而非实现编程和多用组合少用继承设计思想。接下来&#xff0c;通过实战来学习如何将这些理论应用到实际的开发中。 大部…

Linux常见命令 | 文件传输命令scp

文章目录 scp介绍scp命令场景1.上传本地文件到服务器2.上传本地目录到服务器3.从服务器下载文件4.从服务器下载目录 scp介绍 scp是secure copy的简写&#xff0c;是用于在Linux下进行远程拷贝文件的命令。 scp传输是加密的&#xff0c;可能会稍微影响一下速度。另外&#xff…

leetcode初级算法(python)- 数组

文章目录 1.从排序数组中删除重复项2.买卖股票最佳时机23.旋转数组运行颠倒列表法整体移动元素块法4.存在重复运行包含判断法排序比较判断法运行集合判断法5.只出现一次的数字6.两个数组的交集27.移动零8.两数之和9.旋转图像这篇博客中的代码都是数组计算。 1.从排序数组中删除…

自动化部署证书 acme.sh 使用教程

简介 acme.sh 是一个开源的 ACME 协议的客户端工具&#xff0c;用于自动化申请、更新和部署 SSL/TLS 证书。通过使用 acme.sh&#xff0c;用户可以轻松地在服务器上设置 HTTPS 加密连接&#xff0c;而无需手动操作。它支持多种 DNS 接口和证书颁发机构&#xff0c;可以与各种 …

U盘拒绝访问?快速恢复数据的实用方案!

当您尝试访问U盘时&#xff0c;突然遇到“U盘拒绝访问”的提示&#xff0c;这无疑是一个令人头疼的问题。这不仅意味着您无法读取或写入U盘中的数据&#xff0c;还可能意味着重要文件的安全受到威胁。本文将深入探讨U盘拒绝访问的原因&#xff0c;并为您提供至少两种实用的数据…

electron+vue3全家桶+vite项目搭建【27】封装窗口工具类【1】雏形

文章目录 引入思路抽出公共声明文件抽出全局通用数据类型和方法主进程模块1.抽离基础常量2.封装窗口工具类 渲染进程模块测试结果 引入 demo项目地址 可以看到我们之前在主进程中的逻辑全部都塞到index.ts文件中&#xff0c;包括窗口的一些事件处理&#xff0c;handle监听&am…

机器学习打分函数在分子对接中的应用系列-GB_Score

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、GB-Score是什么&#xff1f;二、文献复现 -训练和验证环境1. GB score验证虚拟环境的配置2. Usage1- Preparing ligand and protein file2- Generating features3 - Repeat and extend current…

Linux第66步_linux字符设备驱动_挂载和卸载

1、了解linux中的驱动类型: 1)、字符设备驱动 字符设备是limnux驱动中最基本的一类设备驱动&#xff0c;字符设备就是一个一个字节&#xff0c;按照字节流进行读写操作的设备&#xff0c;读写数据是分先后顺序的。如&#xff1a;GPIO输入输出、UART、I2C、SPI、USB、LCD、音频…