当前位置:   article > 正文

el-table 实现无限滚动,无限调接口bug_el-table-infinite-scroll

el-table-infinite-scroll

vue2 + element ui项目中使用el-table实现无限滚动效果时,出现无限请求接口的bug,安装以下版本插件可以解决。

npm install el-table-infinite-scroll@1.0.10
  • 引入:
  1. // main.js 全局引入
  2. import elTableInfiniteScroll from 'el-table-infinite-scroll'
  3. Vue.use(elTableInfiniteScroll)
  4. //局部引入
  5. import elTableInfiniteScroll from 'el-table-infinite-scroll';
  6. export default {
  7. directives: {
  8. 'el-table-infinite-scroll': elTableInfiniteScroll
  9. }
  10. }
  • 示例:
  1. <template>
  2. <el-table
  3. v-el-table-infinite-scroll="loadMore"
  4. :data="previewData"
  5. height="100%"
  6. >
  7. <el-table-column v-if="preHeader.length>0" width="80" type="index" />
  8. <el-table-column
  9. v-for="item in preHeader"
  10. :key="item.fileName"
  11. :prop="item.fileName"
  12. :label="item.excelName"
  13. min-width="100px"
  14. />
  15. <div slot="empty" class="empty"/>
  16. <div slot="append" style="text-align: center;padding:10px;font-size: 16px;color: #5278fc;">
  17. <p v-if="busy"><i class="el-icon-loading" style="margin-right: 10px;" />加载中···</p>
  18. <div v-if="noMore">没有更多了</div>
  19. </div>
  20. </el-table>
  21. </template>

loadMore

  1. methods:{
  2. loadMore() {
  3. if (this.busy || this.total < 100) return //每页展示100条,总数小于100或加载中时不加载
  4. const total = this.query.pageSize * this.query.pageNum
  5. if (this.total < total) { // 总数小于已请求页数时不加载,提示noMore'没有更多了'
  6. this.noMore = true
  7. return
  8. }
  9. this.busy = true
  10. this.query.pageNum += 1
  11. this.getImportData().then(res => { // 自定义请求方法
  12. this.busy = false
  13. // this.previewData = res.previewData
  14. this.previewData = this.previewData.concat(res.previewData)
  15. }, error => {
  16. console.log(error)
  17. this.busy = false // 报错时记得关闭busy
  18. })
  19. },
  20. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/193958?site
推荐阅读