Element InfiniteScroll无限滚动的具体使用方法


Posted in Javascript onJuly 27, 2020

基础用法

Element InfiniteScroll无限滚动的具体使用方法

<template>
 <ul class="infinite-list" v-infinite-scroll="load">
  <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
 </ul>
</template>

<script>
 export default {
  data () {
   return {
    count: 0
   }
  },
  methods: {
   load () {
    this.count += 2
   }
  }
 }
</script>

禁用加载

Element InfiniteScroll无限滚动的具体使用方法

<template>
 <div class="infinite-list-wrapper">
  <ul
   class="list"
   v-infinite-scroll="load"
   infinite-scroll-disabled="disabled">
   <li v-for="i in count" class="list-item">{{ i }}</li>
  </ul>
  <p v-if="loading">加载中...</p>
  <p v-if="noMore">没有更多了</p>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    count: 10,
    loading: false
   }
  },
  computed: {
   noMore () {
    return this.count >= 20
   },
   disabled () {
    return this.loading || this.noMore
   }
  },
  methods: {
   load () {
    this.loading = true
    setTimeout(() => {
     this.count += 2
     this.loading = false
    }, 2000)
   }
  }
 }
</script>

Attributes

Element InfiniteScroll无限滚动的具体使用方法

element-ui 的 el-table 上使用无限滚动加载(与自带的 infinite-scroll 结合)

安装

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

全局引入

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

局部引入

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
 directives: {
  'el-table-infinite-scroll': elTableInfiniteScroll
 }
}
</script>

完整实例

<template>
 <el-table
  border
  height="400px"
  v-el-table-infinite-scroll="load"
  :data="tableData"
 >
  <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址"> </el-table-column>
 </el-table>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

const exampleData = new Array(10).fill({
 date: '2016-05-02',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1518 弄'
});

export default {
 directives: {
  'el-table-infinite-scroll': elTableInfiniteScroll
 },
 data() {
  return {
   tableData: exampleData
  };
 },
 methods: {
  load() {
   this.$message.success('加载下一页');
   this.tableData = this.tableData.concat(exampleData);
  }
 }
};
</script>

<style scoped>
.el-table {
 width: 100%;
}
</style>

到此这篇关于Element InfiniteScroll无限滚动的具体使用方法的文章就介绍到这了,更多相关Element InfiniteScroll无限滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
You might like
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
会计找工作求职信范文
2013/12/09 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers