赞
踩
vue2 + element ui项目中使用el-table实现无限滚动效果时,出现无限请求接口的bug,安装以下版本插件可以解决。
npm install el-table-infinite-scroll@1.0.10
- // main.js 全局引入
- import elTableInfiniteScroll from 'el-table-infinite-scroll'
- Vue.use(elTableInfiniteScroll)
-
- //局部引入
- import elTableInfiniteScroll from 'el-table-infinite-scroll';
- export default {
- directives: {
- 'el-table-infinite-scroll': elTableInfiniteScroll
- }
- }
- <template>
- <el-table
- v-el-table-infinite-scroll="loadMore"
- :data="previewData"
- height="100%"
- >
- <el-table-column v-if="preHeader.length>0" width="80" type="index" />
- <el-table-column
- v-for="item in preHeader"
- :key="item.fileName"
- :prop="item.fileName"
- :label="item.excelName"
- min-width="100px"
- />
- <div slot="empty" class="empty"/>
- <div slot="append" style="text-align: center;padding:10px;font-size: 16px;color: #5278fc;">
- <p v-if="busy"><i class="el-icon-loading" style="margin-right: 10px;" />加载中···</p>
- <div v-if="noMore">没有更多了</div>
- </div>
- </el-table>
- </template>
loadMore
- methods:{
- loadMore() {
- if (this.busy || this.total < 100) return //每页展示100条,总数小于100或加载中时不加载
- const total = this.query.pageSize * this.query.pageNum
- if (this.total < total) { // 总数小于已请求页数时不加载,提示noMore'没有更多了'
- this.noMore = true
- return
- }
- this.busy = true
- this.query.pageNum += 1
- this.getImportData().then(res => { // 自定义请求方法
- this.busy = false
- // this.previewData = res.previewData
- this.previewData = this.previewData.concat(res.previewData)
- }, error => {
- console.log(error)
- this.busy = false // 报错时记得关闭busy
- })
- },
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。