el-table实现懒加载(el-table-infinite-scroll)

2023.8.15今天我学习了用el-table对大量的数据进行懒加载。

效果如下:

 

1.首先安装:
 

npm install --save el-table-infinite-scroll@2

2.全局引入:

import ElTableInfiniteScroll from "el-table-infinite-scroll";// 懒加载
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

3.页面使用:

<template><div><el-table    v-el-table-infinite-scroll="load">//相关内容</el-table>//提示框内容<el-alert v-if="isflag" title="正在努力加载中..." type="success" center :closable="false" show-icon/><el-alert v-if="isMore" title="没有更多啦!" type="warning" center show-icon/></div></template><script>export default{data(){return{start: 10,//截取数据的开始位置end: 20,//截取数据的结束位置isflag: false,//显示加载中提示的动画isMore: false,//显示没有过多提示的动画},methods:{load() {this.isMore = false;//默认为falsethis.isflag = true;if (this.isflag) {//判断现有表格数据长度是否和全部数据长度一样,不一样的话就进行截取if (this.slice_bed_data_list.length != this.all_bed_data_list.length) {this.slice_bed_data_list = this.slice_bed_data_list.concat(this.all_bed_data_list.slice(this.start, this.end));//每次截取十条数据,截取位置每次都增加10,也可以采用每次截取前十条数据然后删除总数组的前十条数据,这样每次截取的数据就是最新的十条数据。this.start = this.start + 10this.end = this.end + 10} else {setTimeout(() => {this.isMore = true;setTimeout(() => {this.isMore = false;}, 2000);}, 2000);//显示没有过多提示的效果,2秒后消失}setTimeout(() => {this.isflag = falsethis.isMore = false}, 1000)//所有提示都消失}},}}}</script>

如果大家有不懂的地方可以参考:

1.vue—在el-table上实现懒加载效果_列表懒加载插件_迷路小灰灰的博客-CSDN博客

2.el-table-infinite-scroll - npm (npmjs.com) 

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

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

相关文章

clion2020.3配置clang-format

标题clion 启用clang-format 文件->设置->编辑器->代码样式. 为了保持原有代码风格不变&#xff0c;可以把原始的配置风格先导出&#xff0c;最好直接保存到自己的工程下&#xff0c;.clang-format是隐藏文件&#xff0c;需要用ctrlH才能看到 文件->设置->编辑…

SpringBoot复习:(45)@Component定义的bean会被@Bean定义的同名的bean覆盖

有同名的bean需要配置&#xff1a; spring.main.allow-bean-definition-overridingtrue 否则报错。 package cn.edu.tju.component;import org.springframework.stereotype.Component;Component public class Person {private String name;private int age;{this.name "…

室温超导是什么?有哪些应用场景?

目录 一、应用场景&#xff1a;二、案例分析&#xff1a; 室温超导是指在室温下&#xff08;即约 20C 至 30C&#xff09;实现超导现象的材料。超导是指某些材料在低温下电阻为零的物理现象&#xff0c;室温超导材料是超导材料的一种。室温超导现象的发现和研究是超导领域的一个…

ChatGPT在智能游戏和游戏AI中的应用如何?

ChatGPT在智能游戏和游戏AI领域具有广泛的应用潜力&#xff0c;可以为游戏体验增添智能和交互性&#xff0c;同时也有助于游戏开发者创造更丰富、更引人入胜的游戏内容。以下将详细探讨ChatGPT在智能游戏和游戏AI中的应用。 ## 1. 游戏角色的智能化 在角色扮演游戏&#xff0…

103.216.154.X服务器出现漏洞了有什么办法?

服务器出现漏洞是一种严重的安全风险&#xff0c;需要及时采取措施来应对。以下是一些常见的应对措施&#xff1a; 及时更新补丁&#xff1a;确保服务器上的操作系统、应用程序和软件都是最新版本&#xff0c;并及时应用相关的安全补丁&#xff0c;以修复已知的漏洞。 强化访问…

OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源

招募令 OpenHarmony Meetup 广州站 火热招募中&#xff0c;等待激情四射的开发者&#xff0c;线下参与OpenHarmonyMeetup线下交流 展示前沿技术、探讨未来可能、让你了解更多专属OpenHarmony的魅力 线下参与&#xff0c;先到先得,仅限20个名额&#xff01; 报名截止时间8月23日…

【云原生】Docker 详解(三):Docker 镜像管理基础

Docker 详解&#xff08;三&#xff09;&#xff1a;Docker 镜像管理基础 1.镜像的概念 镜像可以理解为应用程序的集装箱&#xff0c;而 Docker 用来装卸集装箱。 Docker 镜像含有启动容器所需要的文件系统及其内容&#xff0c;因此&#xff0c;其用于创建并启动容器。 Dock…

-L和-rpath-link和-rpath

知识点 现代连接器在处理动态库时将链接时路径&#xff08;Link-time path&#xff09;和运行时路径&#xff08;Run-time path&#xff09;分开,用户可以通过-L指定连接时库的路径&#xff0c;通过-R&#xff08;或-rpath&#xff09;指定程序运行时库的路径&#xff0c;大大提…

Go学习-Day1

Go学习-Day1 个人博客&#xff1a;CSDN博客 打卡。 Go语言的核心开发团队&#xff1a; Ken Thompson (C语言&#xff0c;B语言&#xff0c;Unix的发明者&#xff0c;牛人)Rob Pike(UTF-8发明人)Robert Griesemer(协助HotSpot编译器&#xff0c;Js引擎V8) Go语言有静态语言的…

MongoDB安装

文章目录 MongoDB安装设置yum源安装指定版本的mongodb配置文件连接MongoDB的工具MongoDBCompass MongoDB安装 设置yum源 [rootWDQCVM sbin]# vim /etc/yum.repos.d/mongodb-org-6.0.repo [mongodb-org-6.0] nameMongoDB Repository baseurlhttps://repo.mongodb.org/yum/red…

文件预览/下载方式:通过二进制流(Blob)下载、或者通过文件Url下载

一、 通过二进制流&#xff08;Blob&#xff09;下载 1 、API请求时候带上类型 /*** 文件--下载* */ export function download(fphm) {return axios({url: "/ynpst/download-invoice?fphm" fphm,method: get,responseType: blob}) }2、文件预览和下载 /*** 预览…

JavaScript如何执行语句

目录 语法/词法分析 预编译 解释执行 预编译什么时候发生 js运行三步曲 预编译前奏 预编译步骤 巩固基础练习 语法/词法分析 按语句块的粒度解析成抽象语法树 ,分析该js脚本代码块的语法是否正确&#xff0c;如果出现不正确&#xff0c;则向外抛出一个语法错误&#x…

第4章:决策树

停止 当前分支样本均为同一类时&#xff0c;变成该类的叶子节点。当前分支类型不同&#xff0c;但是已经没有可以用来分裂的属性时&#xff0c;变成类别样本更多的那个类别的叶子节点。当前分支为空时&#xff0c;变成父节点类别最多的类的叶子节点。 ID3 C4.5 Cart 过拟合 缺…

文本挖掘 day5:文本挖掘与贝叶斯网络方法识别化学品安全风险因素

文本挖掘与贝叶斯网络方法识别化学品安全风险因素 1. Introduction现实意义理论意义提出方法&#xff0c;目标 2. 材料与方法2.1 数据集2.2 数据预处理2.3 关键字提取2.3.1 TF-IDF2.3.2 改进的BM25——BM25WBM25BM25W 2.3.3 关键词的产生(相关系数) 2.4 关联规则分析2.5 贝叶斯…

css冒号对齐

实现后的样式效果 实现方式 html&#xff1a; <el-col v-if"item.showInSingle ! false" :span"6" style"padding: 4px 0"><label>{{ item.label }}&#xff1a;</label><span v-if"singleData[item.prop] ! 0 &…

iOS字体像素与磅的对应关系

注意&#xff1a;低于iOS10的系统&#xff0c;显示的字宽和字高比高于iOS10的系统小。 这就是iOS10系统发布时&#xff0c;很多app显示的内容后面出现…&#xff0c;因而出现很多app为了适配iOS10系统而重新发布新版本。 用PS设计的iOS效果图中&#xff0c;字体是以像素&#x…

SRM订单管理:优化供应商关系

一、概述SRM订单管理的概念&#xff1a; SRM订单管理是指在供应商关系管理过程中&#xff0c;有效管理和控制订单的创建、处理和交付。它涉及与供应商之间的沟通、合作和协调&#xff0c;旨在实现订单的准确性、可靠性和及时性。 二、SRM订单管理的流程&#xff1a; 1. 订单创…

关于onload事件

onload事件是在网页中的所有内容&#xff08;包括图片、样式表、脚本等&#xff09;都加载完成后触发的事件。它常用于在页面加载完成后执行一些操作&#xff0c;例如初始化页面元素、绑定事件监听器等。 可以通过以下方式来使用onload事件&#xff1a; 在HTML标签中直接添加…

NGINX源码安装

文章目录 NGINX源码安装安装依赖包获取源码NGINX官方网站各个目录的用途 编译安装安装结束后的文件设置为服务 NGINX源码安装 安装依赖包 root执行 yum -y install gcc gcc-c make libtool zlib zlib-devel openssl openssl-devel pcre pcre-devel这些包是用于开发和构建软件…

递归的用法和例子

b站视频&#xff1a;https://www.bilibili.com/video/BV1iS4y1e7MJ/?spm_id_from333.999.0.0&vd_source1717654b9cbbc6a773c2092070686a95 # 递归的定义&#xff1a;其实就是自己调用自己&#xff0c;一般用函数的形式来进行 """ 特点&#xff1a; 1、一定…