vue+element-UI实现跟随滚动条加载表格数据

el-table当数据量大的时候,实现滚动到底部后加载数据,直接上js代码,有其他需求请各自更改

 第一步、在data中定义两个数组

data() {return {innerList:[],  //新数组,用于存放全部数据innerData:[],  //el-table表格数组dom:null,}
}

第二步、在数据发生改变的方法中先循环存放一部分数据用于页面显示

watch: {data:{this.innerData=[];this.innerList=[];//将接口中获取到的数据全部存放到数组this.innerList = this.data.records || this.data.data || [];//先循环出100条数据用于显示for(let i=0;i<this.innerList.length;i++){if(i<100){this.innerData.push(this.innerList[i]);}}}
}

第三步、在mounted监听滚动事件

mounted() {// 设置滚动条监听时间加载数据this.dom = this.$refs.elTable.bodyWrapper;this.dom.addEventListener('scroll', () => {let scrollTop = this.dom.scrollTop;   //滚动距离let scrollHeight = this.dom.scrollHeight;   //滚动条的总高度let clientHeight = this.dom.clientHeight;   //可视区的高度if (scrollTop + clientHeight === scrollHeight) {if (this.innerList.length <= this.innerData.length) return if (this.innerData.length + 50 > this.innerList.length) {// 如果不够50条就全部渲染上去this.dom.scrollTop = this.dom.scrollTop - 50; this.innerData=[];this.innerData.push(...this.innerList)} else {this.dom.scrollTop = this.dom.scrollTop - 50;let id = this.innerData.length;//每次渲染50条数据for (let index = id; index < id + 50; index++) {this.innerData.push(this.innerList[index])}}}})
}

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

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

相关文章

【JavaScript】实现网页中的选项卡

一、简易选项卡 以下是实现一个简单选项卡的代码。代码中有注释。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

Airbnb 引入 HTTP Streaming,网页性能得到大幅度提升

Airbnb 通过引入HTTP Streaming来提升网站的页面加载性能。他们将测试的每个页面&#xff08;包括主页&#xff09;的首次内容绘制&#xff08;First Contentful Paint&#xff0c;FCP&#xff09;时间降低了大约 100 毫秒。他们还最小化了后端慢查询对加载时间的影响。 Airbn…

Nextjs 中使用Jquery JS脚本加载

1、页面中引入 import Script from "next/script"; 2、引入你放在public目录下的JS代码 <Script src"/asset/js/common/jquery-3.6.0.min.js"/> <Script strategy"lazyOnload">$("#xxml").css("color","…

Docker概述 镜像-容器基本操作

Docker 概述 Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。 Docker是在Linux容器里运行应用的开源工具&#xff0c;是一种轻量级的“虚拟机”。 Docker 的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的、自给自足…

Docker 安装 和 GPU 支持

一、Docker安装过程&#xff08;ubuntu18.04环境&#xff09; 清华镜像 docker 安装&#xff1a;docker-ce | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 1、由于apt官方库里的docker版本可能比较旧&#xff0c;所以先卸载可能存在的旧版本&…

MySQL(一)基本架构、SQL语句操作、试图

MySQL系列文章 MySQL&#xff08;一&#xff09;基本架构、SQL语句操作、试图 MySQL&#xff08;二&#xff09;索引原理以及优化 MySQL&#xff08;三&#xff09;SQL优化、Buffer pool、Change buffer MySQL&#xff08;四&#xff09;事务原理及分析 MySQL&#xff08;五&a…

异步任务——CompletabelFuture

本专栏学习内容又是来自尚硅谷周阳老师的视频 有兴趣的小伙伴可以点击视频地址观看 在学习CompletableFuture之前&#xff0c;必须要先了解一下Future Future 概念 Future接口&#xff08;FutureTask实现类&#xff09;定义了操作异步任务执行的一些方法&#xff0c;如获取异…

前端学习——Vue (Day2)

指令补充 指令修饰符 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

每月进度总结 7月1日~7月22日

一个月已经过了三分之二了&#xff0c;感觉这个月是在学校学的很多。也是最充实的三个星期。其中也有发呆&#xff0c;也有过懊悔&#xff0c;今天状态为什么这么差&#xff0c;就学了这一点。但是还有学到知识的喜悦。总之是认识到了自己的很多不足&#xff0c;也找到了相对正…

【笔试强训选择题】Day28.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

基础 | 日志 | 体系介绍

INDEX 总览图上图的说明 总览图 上图的说明 日志体系的结构大约可以概括为 日志门面日志绑定层日志实现日志桥接层 slf4j 是 日志门面&#xff0c;所谓日志门面可以理解为日志总接口 slf4j-log4j、log4j-slf4j-impl 是 日志绑定层&#xff0c;日志绑定层的作用是将 日志门面…

C#using关键字的使用方法

这篇日志记录下C#中using关键字的使用方法。 Using的使用大致分别以下三种&#xff1a; 1&#xff1a;using指令&#xff08;命名空间&#xff09; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; …

【stable diffusion】保姆级入门课程03-Stable diffusion(SD)图生图-涂鸦(绘图)的用法

目录 0.本章素材 1.涂鸦有什么用 2.涂鸦的使用场景是什么 3.操作面板 4.提示词与涂鸦 5.涂鸦与重绘幅度 6.涂鸦的其他用法(自由创作) 7.课后训练 0.本章素材 Realistic Vision V3.0模型(真实系模型)百度网盘链接&#xff1a;https://pan.baidu.com/s/1HkSKW2t4L6wMg…

HJ106 字符逆序

描述 将一个字符串str的内容颠倒过来&#xff0c;并输出。 数据范围&#xff1a;1≤len(str)≤10000 1≤len(str)≤10000 输入描述&#xff1a; 输入一个字符串&#xff0c;可以有空格 输出描述&#xff1a; 输出逆序的字符串 示例1 输入&#xff1a; I am a student…

python redis 连接池 和 消息 订阅发布

python redis 连接池 和 消息 订阅发布 redis 发布订阅&#xff08;PubSub&#xff09;&#xff0c;深入解读 https://blog.csdn.net/ldw201510803006/article/details/126093445 def connectredis(self):try:#redis的连接池#rs StrictRedis(hostself.host, port6379, db2 )r…

Day52: 84.柱状图中最大的矩形

84.柱状图中最大的矩形 84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 思路 本题是要找每个柱子左右两边第一个小于该柱子的柱子&#xff0c;所以从栈头&#xff08;元素从栈头弹出&#xff09;到栈底的顺序是从大到小的顺序。例&#xff1a; 三种情况&a…

uniapp:拖拽容器movable-view,层级问题解决

代码 <template><view class"index"><view click"toast">页面内容事件触发</view><movable-area class"movableArea"><movable-view :x"x" :y"y" direction"all" change"m…

Kubernetes 使用 helm 部署 NFS Provisioner

文章目录 1. 介绍2. 预备条件3. 部署 nfs4. 部署 NFS subdir external provisioner4.1 集群配置 containerd 代理4.2 配置代理堡垒机通过 kubeconfig 部署 部署 MinIO添加仓库修改可配置项 访问nodepotingress 1. 介绍 NFS subdir external provisioner 使用现有且已配置的NFS…

百度智能汽车负责人储瑞松离职,智驾重心转向ANP3

作者 | 王博 HiEV从多个信息源获悉&#xff0c;百度集团副总裁、百度智能汽车事业部总经理储瑞松将从百度离职。一位知情人士透露&#xff0c;储瑞松「即将启程&#xff0c;返回美国」。 继百度Apollo技术骨干郭阳离职后&#xff0c;储瑞松的变动&#xff0c;更加直白地反映出百…

【贪心算法part05】| 435.无重叠区间、763.划分字母区间、56.合并区间

目录 &#x1f388;LeetCode435. 无重叠区间 &#x1f388;LeetCode763.划分字母区间 &#x1f388;LeetCode 56.合并区间 &#x1f388;LeetCode435. 无重叠区间 链接&#xff1a;435.无重叠区间 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, …