elementUI 表格滚动分页加载请求数据

需求:elementui Table表格滚动分页(不使用分页组件),请求数据。

1、自定义加载更多数据的指令,在utils文件夹中创建 loadMore.js

/*** 加载更多数据的指令*/
export default {install(Vue) {Vue.mixin({directives: {loadmore: {bind(el, binding) {let bindTime = nullclearTimeout(bindTime)// eslint-disable-next-line space-before-function-parenbindTime = window.setTimeout(function () {var selectWrap = el.querySelector('.el-table__body-wrapper')selectWrap.addEventListener('scroll',// eslint-disable-next-line space-before-function-parenfunction () {if (this.scrollTop == 0) {binding.value('up', this)return false}if (this.clientHeight + this.scrollTop + 1 >= this.scrollHeight) {binding.value('down', this)}},false)}, 200)}}}})}
}

2、在main.js中添加以下代码

import loadMore from './utils/loadMore';
Vue.use(loadMore);

3、组件中使用

// 该处涉及项目,其他属性参考elementui文档 v-loadMore即自定义指令
<template><el-table :loading="isLoading" v-loadmore="getData"></el-table>
</template>data() {return {isLoading:false,pageSize: 30,pageNum: 1,total: 0,tableData: []}
}methods: {// 请求数据async getData(a) {this.pageNum += 1if (a === 'down') {this.isLoading = truevar params = {page: this.pageNum,pageSize: this.pageSize,// 其他参数...}var res = await getDataApi(params)this.isLoading = falseif (res) {this.total = res.panelData.totalif (this.total >= this.tableData.length) {this.tableData = this.tableData.concat(res.panelData.records)}}}}}

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

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

相关文章

利用 trait 实现多态

我在书上看到基于 std::io::Write 的示例&#xff0c;它是一个 trait 类型&#xff0c;内部声明了一些方法。和 go 语言不同&#xff0c;rust 中类型必须明确实现 trait 类型&#xff0c;而 go 语言属于 duck 模式。 std::io::Write下面的例子中调用 write_all 方式来演示&…

【SpringBoot】SpringBoot JPA 基础操作(CURD)

SpringData JPA 基本介绍 Spirng data jpa是spring提供的一套简化JPA开发的框架&#xff0c;按照约定好的【方法命名规则】写dao层接口&#xff0c;就可以在不写接口实现的情况下&#xff0c;实现对数据库的访问和操作。 同时提供了很多除了CRUD之外的功能&#xff0c;如分页…

国标GB28181视频监控平台EasyGBS无法播放,抓包返回ICMP的排查过程

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台&#xff0c;可实现的视频功能包括&#xff1a;实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强&#xff0c;支持将…

ZQC的游戏 题解

前言 这题题意描述不是很清楚啊&#xff0c;所以我找了个有权限的人把题面改了改&#xff0c;应该还是比较清楚了。 感觉这道题挺妙的&#xff0c;就来写一篇题解。 思路 首先&#xff0c;根据贪心思想&#xff0c;我们会将 1 1 1 号点半径以内能吃的都吃了&#xff0c;假…

【JavaScript】正则表达式常用元字符使用方法(实例)

目录 一、基本元字符1.\d2.\D3.\s4.\S5.\w6.\W7..8.\ 二、边界符1.^2.$3.用 ^ 和 $ 限制开头和结尾 三、限定符1.*2.3.&#xff1f;4.{n}5.{n,}6.{n,m} 四、特殊符号1.()2.|3.[] 五、exec()函数实例 一、基本元字符 1.\d //表示至少包含一位数字(0-9)var reg /\d/;console.lo…

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

1.1 创建css文件&#xff0c;用于编辑style 注意&#xff1a; 1.背景颜色用ppt的取色器来获取&#xff1a; 先点击ppt的形状轮廓&#xff0c;然后点击取色器&#xff0c;吸颜色&#xff0c;然后再点击形状轮廓的其他轮廓颜色&#xff0c;即可获取到对应颜色。 2.表格间的灰色线…

【Spring Boot】Web开发 — 数据验证

Web开发 — 数据验证 对于应用系统而言&#xff0c;任何客户端传入的数据都不是绝对安全有效的&#xff0c;这就要求我们在服务端接收到数据时也对数据的有效性进行验证&#xff0c;以确保传入的数据安全正确。接下来介绍Spring Boot是如何实现数据验证的。 1.Hibernate Vali…

生态合作丨MemFireDB通过麒麟软件NeoCertify认证

近日&#xff0c;敏博科技“MemFireDB分布式关系数据库系统V2.8”与麒麟软件“银河麒麟高级服务器操作系统V10” 完成兼容性测试&#xff0c;获得麒麟软件 NeoCertify 认证证书。测试结果显示&#xff0c;MemFireDB数据库在国产操作系统上运行稳定&#xff0c;产品已经达到通用…

RocketMQ集成Springboot --Chapter4

RocketMQ实现延时消费 rocketMQTemplate.syncSend(“helloTopicBoot”,msg,3000,3); 3000为等待消息回传时间&#xff0c;如果3000毫秒还没有回传即发送错误信息&#xff0c; 3为延时消费的时间 /***生产者*发送延时消息*/Testpublic void sendDelayMsg(){Message msg Message…

Mysql-DQL查询

目录 1.DQL 基本语法 基本查询 条件查询 聚合函数 分组查询 排序查询 分页查询 1.DQL 数据查询语言&#xff0c;用来查询数据库中表的记录。 查询关键字&#xff1a;select 基本语法 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字…

android studio(火烈鸟版本)使用protobuf

一、简介 Protobuf 全称&#xff1a;Protocol Buffers&#xff0c;是 Google 推出的一种与平台无关、语言无关、可扩展的轻便高效的序列化数据存储格式&#xff0c;类似于我们常用的 xml 和 json。 二、特点 Protobuf 用两个字总结&#xff1a;小&#xff0c;快。用 Protobu…

十大排序算法详解

目录 1. 冒泡排序 a. 思路 b. code 2. 插入排序 a. 思路 b. code 3. 希尔排序【插入排序plus】 a. 思路 b. code 4. 选择排序 a. 思路 b. code 5. 基数排序 a. 前置知识 b. 思路 c. code 6. 计数排序 a. 思路 b. code 7. 桶排序&#xff08;计数排序plus &…

Could not resolve placeholder

本质原因&#xff1a;项目启动未扫描到该配置&#xff0c;一般来说是配置不对 检查方向 1、检查编译后的target包里是否有该配置所在的文件 如果不在就clear&#xff0c;重新编译启动再去检查 2、检查启动的环境是否匹配 编译后的target包下的配置文件名称是否跟启动类的环境…

【如何训练一个中译英翻译器】LSTM机器翻译模型部署之ncnn(python)(四)

ncnn&#xff1a;https://github.com/Tencent/ncnn 1、.h5模型保存为TFSaveModel格式 import tensorflow as tf from keras.models import load_model# 加载Keras模型 model load_model(encoder_model.h5)# 转换为SavedModel类型 tf.saved_model.save(model, TFSaveModel)2、…

Linux--assert函数在debug和release下的区别

在debug模式下断言才有效&#xff0c;而在release版本下&#xff0c;断言就无效了 在debug模式下&#xff0c;assert函数用于检查条件是否为真&#xff0c;如果条件为假&#xff0c;则会输出相应的错误信息&#xff0c;并停止程序执行。而在release模式下&#xff0c;assert函数…

redis的常用命令和数据结构

目录 redis的基本特征 Redis操作命令行 redis的数据结构 Redis的基本特征 键值型&#xff0c;value支持多种不同的数据结构&#xff0c;功能丰富 单线程&#xff0c;每个命令具备原子性 低延迟&#xff0c;速快&#xff08;基于内存&#xff0c;IO多路复用&#xff0c;良好…

无涯教程-jQuery - html( val )方法函数

html(val)方法设置每个匹配元素的html内容。此属性在XML文档上不可用。 html( val ) - 语法 selector.html( val ) 这是此方法使用的所有参数的描述- val - 这是要设置的html内容。 html( val ) - 示例 以下是一个简单的示例&#xff0c;简单说明了此方法的用法- <…

【OpenCV】windows环境下,java OpenCV环境搭建,java 也可以实现opencv的功能了!opencv自由了

目录 1. 下载opencv 2. 安装opencv 目录 1. 下载opencv 2. 安装opencv 3. dll文件的导入配置 dll文件的导入&#xff1a; &#xff08;C的类库文件&#xff09;&#xff0c;opencv是c开发的类库&#xff0c;java语言要调用其中的方法&#xff0c;所以依赖了dll文件 3.1…

前端框架学习-Vue(一)

Vue简介 百度百科上关于vue的词条&#xff0c;说vue时一款渐进式JavaScript框架&#xff0c; 简单来说,渐进式是一种设计理念,即在不失去当前功能的前提下,逐步添加新的特性。 说明它时一直在进行维护的。 Vue3&#xff0c;中使用*.vue作为文件后缀&#xff0c;html&#xff0c…

解决安装依赖时报错:npm ERR! code ERESOLVE

系列文章目录 文章目录 系列文章目录前言一、错误原因二、解决方法三、注意事项总结 前言 在使用 npm 安装项目依赖时&#xff0c;有时会遇到错误信息 “npm ERR! code ERESOLVE”&#xff0c;该错误通常发生在依赖版本冲突或者依赖解析问题时。本文将详细介绍出现这个错误的原…