(编辑:jimmy 日期: 2024/10/30 浏览:2)
基础用法
<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>