Element InfiniteScroll无限滚动的具体使用方法
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了Element InfiniteScroll无限滚动的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
基础用法
<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>
禁用加载
<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-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无限滚动内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！