el-table 实现无限滚动,无限调接口bug

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
      })
    },
}

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值