el-table长列表进行下拉分页_爱分享的Hayes小朋友的博客-程序员秘密_el-table 滚动分页

技术标签: elementui  前端  vue.js  javascript  

el-table长列表进行下拉分页

在我们开发表格的时候,一般都会用到分页,有点击页码分页和下拉分页,点击页码分页在这里就不和大家分享了,今天和大家分享一下下拉分页。

下拉分页的原理就是:el-table + 无限滚动

我使用的是一个插件:el-table-infinite-scroll
插件地址:https://www.npmjs.com/package/el-table-infinite-scroll

npm i el-table-infinite-scroll   //安装依赖
// 在main.js里面全局引入
import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);
// 局部引入
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
    
  directives: {
    
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
// 在el-tbale 上使用
			<el-table
              :data="tableData"
              v-loading="loading"
              border
              class="table-class"
              v-el-table-infinite-scroll="load"   // 下拉分页的方法
              ref="table"
              lazy
              @sort-change="sortChange"
              max-height="790"
            >
	              <el-table-column prop="id" label="序号" width="50" align="center">
	                <template slot-scope="scope">
	                  <span>{
    {
     scope.$index + 1 }}</span>
	                </template>
	              </el-table-column>
             </el-table>

		// 查询列表的方法
		checkStratery(){
    
			...
		}
		load(){
    
			if (
    			this.page < 1 ||
  				(this.$refs.table &&
           		this.$refs.table.bodyWrapper &&
           		this.$refs.table.bodyWrapper.scrollTop == 0)
       		) {
    
        		return false;
       		}
       		setTimeout(() => {
    
        		this.page += 1;   // 滚动到最底下的时候 page+1
        		this.checkStratery();  // 然后执行一下查询表格数据的接口
     		}, 500);
		}

这样,下拉分页的功能就完成了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/x_XDGS/article/details/123324078

智能推荐

软件项目开发流程以及人员职责_zhangbijun1230的博客-程序员秘密

软件项目开发流程以及人员职责2008年03月07日 12:05:00阅读数:29879实行软件工程项目管理:▲ 项目经理(负责人):项目经理(负责人)对整个项目负完全责任,是指导、控制、管理和规范某个软件和软/硬件系统建设的人,项目经理(负责人)是最终对客户负责的人。▲ 软件项目经理(负责人):软件项目经理(负责人)对一个项目的所有软件活动负完全责任,控制一个项目的所有软件资源,按照软件约定与项目...

Leetcode day4:打家劫舍III_hit1180300517的博客-程序员秘密

原题:在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可行窃的地区。这个地区只有一个入口,我们称之为“根”。 除了“根”之外,每栋房子有且只有一个“父“房子与之相连。一番侦察之后,聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树”。 如果两个直接相连的房子在同一天晚上被打劫,房屋将自动报警。计算在不触动警报的情况下,小偷一晚能够盗取的最高金额。(话说这个小偷这么聪明为什么不去当程序员)示例 1:解释: 小偷一晚能够盗取的最高金额 = 3 + 3 + 1 = 7.示例 2:

频繁项集挖掘算法在告警关联中的应用_云智慧AIOps社区的博客-程序员秘密_频繁项挖掘

# 技术黑板报 # 第十期推荐阅读时长:15min在上一篇技术黑板报中,我们介绍了频繁项集挖掘这一问题,并讲解了Apriori算法与FP-Growth算法的技术原理。本期技术黑板报我们将主要围绕频繁项集挖掘算法的实际应用,即当该算法应用到告警关联场景中时,我们遇到了哪些问题,如何解决这些问题,以及我们如何在原始FP-Growth算法的基础上进行改进,从而研发了专用于告警关联场景下的CW-FP-Growth算法。为了展示该算法的实际效果,我们在文末给出了这一算法在脱敏数据中的案例。..

AlertManager实现webhook告警(使用Postman测试)_程序员小王java的博客-程序员秘密_alertmanage webhook

AlertManager实现webhook告警(使用Postman测试),Alertmanager 主要用于接收 Prometheus 发送的告警信息,它支持丰富的告警通知渠道,而且很容易做到告警信息进行去重,降噪,分组等,是一款前卫的告警通知系统。但是我们公司内部不使用Prometheus,只使用AlertManager.

Java基础__Java中异常处理那些事_weixin_30414635的博客-程序员秘密

一、Exception 类的层次所有的异常类是从 java.lang.Exception 类继承的子类。Exception 类是 Throwable 类的子类。除了Exception类外,Throwable还有一个子类Error 。Error 用来指示运行时环境发生的错误。异常类有两个主要的子类:IOException 类和 RuntimeException 类。...

随便推点

架构设计 - 自动化运维之架构设计六要点_数据和云的博客-程序员秘密

运维自动化是我们所渴望获得的,但是我们在一味强调自动化能力时,却忽略了影响自动化落地的一个关键因素。那便是跟运维朝夕相处,让人又爱又恨的业务架构。因为业务架构是决定运维效率和质量的关键因素之一,所以我想跟大家一起聊一下怎么样的架构设计是对运维友好的。结合这些年在腾讯遇到的业务架构和做运维规划时对业务非功能规范的思考,我们可以把面向运维的架构设计分成六大设计要点。

解决word或wps办公软件删除空白页后页面布局变乱问题_归零-li的博客-程序员秘密

在word或wps文档使用中,我们通常用使用Delete或Backspace键删除空白页,但是有时候会遇到删除后其他页面布局变乱的情况,为了能使其他页面正常显示,需要通过以下方式解决:对于办公软件的使用,确实总能遇到很多不大懂处理的问题,绝大部分通过百度还是可以解决的,但需要花费一定的时间去查找,把问题及解决的方法记下来,以后可以少走些弯路~...

pandas 常用的数学统计方法 mad()_诗雨时的博客-程序员秘密_mad法

pandas 常用的数学统计方法 mad()1、定义:根据平均值计算平均绝对距离差。2、示例: import pandas as pdstudent_info = pd.read_csv("F:/人工智能/科学计算库/files/student_info.csv")pri...

什么是DevOps?_老杨的码农生活的博客-程序员秘密_devops什么意思

最近的DevOps的概念很火,大家都在讨论DevOps,有人说DevOps是自动化运维,有人说DevOps是流程和管理,还有人说DevOps是一种文化,以前的运维工程师也纷纷变成了DevOps工程师。 那DevOps究竟是什么?传统的运维模式以及面临的挑战 在传统的瀑布模型开发中,软件生命周期中的运行维护工作是由运维工程师来完成的。 开发人员完成编码,测试...

从Halcon到Opencv(python)_fill_up_shape_Kevin_liuj的博客-程序员秘密

主要记录一下从Halcon的一些算例在opencv中的实现Halcon中的例子:fill_up_shape实现的目的如下:原图:最终要输出的我改了一下:代码实现如下:首先定义一个通过Trackbar以面积为特征的选择函数,从而输出选定区域.def show_selectShape(image,binary,method = 'area',scale = 1.0): if method == 'area': num_labels, labels, stats, ce

html报警函数,alertmanager自定义告警模板(五)_心安王的博客-程序员秘密

一、告警模板alertmanager是可以自定义告警模板的。注意钉钉需要部署prometheus-webhook-dingtalk,这个也是支持模板的,但是模板要写在prometheus-webhook-dingtalk里,而不是alertmanager项目链接https://github.com/timonwong/prometheus-webhook-dingtalk通过配置templates...

推荐文章

热门文章

相关标签