el-table 实现滚动加载el-table-infinite-scroll
温馨提示:使用此插件时,要注意版本选择
我一开始没注意直接装了最新版本,我的vue2项目一下就报错了,我又重新装了老一点的版本才恢复正常
一、安装(点击查看插件文档)
npm install --save el-table-infinite-scroll
二、注册
1、全局注册(main.js)
import Vue from 'vue'
import elTableInfiniteScroll from 'el-table-infinite-scroll'
Vue.use(elTableInfiniteScroll)
2、局部注册
<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll'
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
}
}
</script>
三、使用
v-el-table-infinite-scroll
传入加载的函数infinite-scroll-distance
可自定义底部距离多少触发加载infinite-scroll-disabled
控制何时禁用
<template>
<el-table
:data="data"
height="200px"
v-el-table-infinite-scroll="getList"
:infinite-scroll-distance="10"
:infinite-scroll-disabled="disabled"
>
<el-table-column type="index" />
<el-table-column prop="date" label="date" />
<el-table-column prop="name" label="name" />
<el-table-column prop="age" label="age" />
</el-table>
</template>
<script>
const dataTemplate = new Array(10).fill({
date: "2009-01-01",
name: "Tom",
age: "30",
});
export default {
data() {
return {
data: [],
page: 0,
total: 5,
disabled: false
};
},
methods: {
getList() {
if (this.disabled) return;
this.page ;
if (this.page <= this.total) {
this.data = this.data.concat(dataTemplate);
}
if (this.page === this.total) {
this.disabled = true;
}
},
},
};
</script>
使用非常简单,文档也很清晰,直接照搬过去就OK
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggcaej
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13