el-table滚动加载数据;vue自定义指令监听el-table的滚动事件,达到滚动条滚动到底部加载新数据

首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令,以供全局使用

// 监听el-table滚动
Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.el-table__body-wrapper')selectWrap.addEventListener('scroll', function() {let sign = 0const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight - 1if (scrollDistance <= sign) {binding.value()}})}
})

在el-table标签上加上定义在全局的滚动指令,v-loadmore=“自定义名”

<el-table ref="tableData"v-loadmore="loadMore"v-loading="loading":data="tableData"borderstripe>...</el-table>

在使用到el-table的页面中的methods方法中使用该自定义指令对应的函数名。

    // 表格滚动加载事件loadMore() {console.log('触发滚动加载事件')}

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

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

相关文章

PHPMailer - PHP email transport class

在服务器安装 sendmail sudo apt-get install sendmail启动 sendmailsudo /etc/init.d/sendmail start 修改 php.ini [mail function] SMTP localhost smtp_port 25 sendmail_from meexample.com Function sendMail <?php /* 调用PHPMailer发送电邮 * param String $r…

Razor语法大全

From: http://www.cnblogs.com/dengxinglin/p/3352078.html Razor是基于framewor4以上写的一个开源项目&#xff1a;https://github.com/Antaris/RazorEngine/ Razor是包含了模板引擎和动态编译两部分。本部分就简单记录了模板引擎的一些语法&#xff0c;之后用Razor做一个代码…

ArcGIS Engine开发之旅02--ArcGIS Engine中的类库

原文 ArcGIS Engine开发之旅02--ArcGIS Engine中的类库 System类库 System类库是ArcGIS体系结构中最底层的类库。System类库包含给构成ArcGIS的其他类库提供服务的组件。System类库中定义了大量开发者可以实现的接口。AoInitializer对象就是在System类库中定义的&#xff0c;所…

el-dialog的内容不刷新;el-dialog内容有缓存;el-dialog里面的组件不刷新问题;

el-dialog里面的内容是带缓存的&#xff0c;也就是说除了第一次打开会初始化&#xff0c;其他次打开都是直接加载缓存的&#xff1b; 这就导致了有时候打开弹框时候&#xff0c;内容不刷新。有说法说是el-dialog嵌套太深大致的。 解决方法&#xff1a;直接给弹框的内容部分添加…

Android布局属性详解之RelativeLayout

RelativeLayout用到的一些重要的属性&#xff1a; 第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_alignParentBottom 贴紧父元素的下边…

el-badge标记;el-tabs配合el-badge提示数字

标签选项卡配个标记数字提示 注意&#xff1a;el-tabs可以通过具名 slot 来实现选项卡的内容 <template><div><el-tabs v-model"tabValue"><el-tab-pane label"全部" name"1"></el-tab-pane><el-tab-pane lab…

[DP之计数DP]

其实说实在 我在写这篇博客的时候 才刚刚草了一道这样类型的题 之前几乎没有接触过 接触过也是平时比赛的 没有系统的做过 可以说0基础 我所理解的计数dp就是想办法去达到它要的目的 而且一定要非常劲非常快 都是一个很小的数然后有很多种接下来的方案使得这个数一下子变很大 计…

C++程序设计(第2版)课后习题答案--第11章

11.9 定义分数类Rational...... View Code 1 #include<iostream.h>2 #include<stdlib.h>3 class Rational{4 private:5 int fm,fz;6 int getZdgys(int a,int b);7 public:8 Rational(){9 fm1;fz0; 10 } 11 Rational(int a,int b); 1…

el-table设置动态高度:height;el-table设置最大高度max-heigh

<template><div><!-- 表格 height绑定tHeight--><el-tableref"singleTable":data"tableData":height"tHeight":max-height"maxHeight"><el-table-columnprop"date"label"日期"width&q…

C#控制台程序中处理2个关闭事件的代码实例

From: http://www.cnblogs.com/lvxiangjack/p/5363627.html 我们开发的控制台应用&#xff0c;在运行阶段很有可能被用户CtrlC终止或是被用户直接关闭。如果我们不希望用户通过CtrlC终止我们的程序&#xff0c;就需要对CtrlC或关闭事件作处理。 处理方法 在.net平台下Console类…

字典表左右选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns"http://www.w3.org/1999/xhtml"><head><title>管理中心 - 添加新配送点 &l…

Oracle内部错误:ORA-07445[kcflfi()+466] [INT_DIVIDE_BY_ZERO]一例

一套Windows上的11.2.0.1单实例数据库在database open阶段出现了ORA-07445:core dump [kcflfi()466] [INT_DIVIDE_BY_ZERO] [] [PC:0x500282E] [] []内部错误&#xff0c;具体的出错日志如下: LOG CONTENTALERT.LOGStarting ORACLE instance (normal) LICENSE_MAX_SESSION 0 L…

提交本地项目到github

要托管到github&#xff0c;那你就应该要有一个属于你自己的github帐号&#xff0c;所以你应该先到github.com注册 打开浏览器 在地址栏输入地址&#xff1a;github.com 填写用户名、邮箱、密码 点击Sign up即可简单地注册 2完成注册&#xff0c;进入github平台&#xff0c; 点…

一个能自动搜索源文件并自动推导的Makefile

From: http://blog.csdn.net/yuliying/article/details/49635485 这份makefile可以将当前makefile所在文件夹以及所有子文件夹中的cpp文件打包成静态库和动态库. 稍作修改目标也可以用来编译为可执行文件。 自动生成所有依赖关系&#xff0c;修改任何文件都可以触发重新编译相应…

(转)android WebView loadData不能解析(找不到网页)

public void loadData (String data, String mimeType, String encoding) loadData() 中的html data中不能包含#, %, \, ?四中特殊字符&#xff0c;出现这种字符就会出现解析错误&#xff0c;显示找不到网页还有部分html代码。因为css中经常用#, %等字符&#xff0c;所以大部…

C++11 std::bind std::function 高级用法

From: http://blog.csdn.net/eclipser1987/article/details/24406203 从最基础的了解&#xff0c;std::bind和std::function [cpp] view plaincopy/* * File: main.cpp * Author: Vicky.H * Email: eclipser163.com */ #include <iostream> #include <fun…

fragment+viewpager+tablayou实现滑动切换页面

本文目标&#xff1a;实现滑动切换页面 首先&#xff0c;Tablayout控件就需要添加design library&#xff0c;在android studio中添加依赖 compile ‘com.android.support:design:23.2.1’ 或者直接&#xff1a;File-->Project structure-->app-->Dependencies中单击加…

php 的命名空间 看鸟哥后的随笔

我以前貌似真心没有想过php的命名空间&#xff0c;我每次写文件都会记得不让类名相重&#xff0c; 看完命名空间了这个&#xff0c;我发现可以解决我的一部分问题 1 MyLove.php2 namespace Zj;3 class Application{4 public function toMyLove(){5 echo Marx is…

vue页面截图;H5页面截图;vue项目中将特定网页内容生成图片(截图);html2canvas截图

功能&#xff1a; 1.兼容 PC 和 Mobile&#xff1b; 2.对指定的区域进行截取&#xff1b; 3.可以控制截图大小&#xff1b; 4.截图生成base64图片地址 一、安装插件 npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用 import html2canvas fro…

CentOS6.8升级gcc到4.8.5总结

From&#xff1a; http://www.cjjjs.com/paper/czxt/2017222114137150.aspx [摘要] 操作系统是CentOS6.8的32位版本&#xff0c;yum自带的gcc版本为4.4.7&#xff0c;不支持C11特性。所以需要升级到4.8.5&#xff0c;至少要升级到4.8.1才完全支持C11。本文提供了自动安装脚本和…