无限下滚的table表格 切 当数据获取不到时自动去循环

前言

提示：根据项目需求需要实现一个无限下滚的table表格 切 当数据获取不到时自动去循环

看效果图片,table使用elementui table 修改:

主要代码:

     // 设置自动滚动
      autoRoll(stop = null) {
        if (stop) {
          clearInterval(this.rolltimer)
          return
        }
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.eltable
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
        this.rolltimer = setInterval(() => {
          // 元素自增距离顶部像素
          //divData.scrollTop += this.elTable_Options.speed
          $(divData).animate({
            scrollTop: `${divData.scrollTop += this.elTable_Options.speed}px`
          }, 0)
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            //this.gettabledata()
            //this.num++
          }
        }, 20)
      },


      //后台数据查询
      gettabledata(row = {},flag = 0) {
        if(!flag){
          this.loading = true;
        }
        let query_searchBox = {}
        if (typeof row.currentPage != "undefined") {
          this.currentPage = row.currentPage;
          this.count = row.count;
          this.pageshow = false
          if (typeof row.searchBox != 'undefined' && typeof this.elTable_Options.searchList != 'undefined') {
            this.$refs.queryBar.searchBox = row.searchBox
          }
        }
        let params = {};
        //是否有查询栏
        if (typeof this.elTable_Options.searchList != 'undefined') {
          if(this.$refs.queryBar){
            query_searchBox = this.$refs.queryBar.searchBox
          }
          //汇总查询数据
          if (JSON.stringify(this.commonV.gettableDataqueryselet(this.elTable_Options.searchList,
              query_searchBox)) != '{}') {
            //搜索框有搜索
            this.ifsearchdata = true
          }
          Object.assign(params, params, this.commonV.gettableDataqueryselet(this.elTable_Options.searchList,
            query_searchBox))
        }
        params.p = this.currentPage;
        params.page_size = this.count;
        //是否有额外查询条件
        if (typeof this.elTable_Options.addConditions != 'undefined' && this.elTable_Options.addConditions.length > 0) {
          for (let index = 0; index < this.elTable_Options.addConditions.length; index++) {
            params[this.elTable_Options.addConditions[index].key] = this.elTable_Options.addConditions[index].value;
          }
        }

        //如果参数更上次不一样 (除了p 和 page_size)就将table置空
        for(let key in params){
          if(key==='p' || key==='page_size'){
            continue
          }else{
            if(params[key] === this.searchParams[key]){
              continue
            }else{
              this.searchParams[key] = params[key]
              this.tableData = []
            }
          }
        }

        /* 是否有排序条件 */
        if (this.sort_change_data != null) {
          params.sort_change_data = JSON.stringify(this.sort_change_data)
        }

        let allparams = {
          params: params,
          api: this.elTable_Options.getwayname,
        }
        this.$store
          .dispatch("getmsgData", allparams)
          .then(response => {
            let res = response.data;
            let results = typeof res.results == 'undefined' ? res : res.results
            /*资源操作记录 */
            let data = JSON.parse(JSON.stringify(results))
            //后面没有数据 停止发送请求
            if(data.length < this.count){
              clearInterval(this.ScrollTime)
              this.loading = true
              this.tableData.push(...data)
              setTimeout(() => {
                this.loading = false
              },1000)
              return 
            }
            if(flag){
              this.loading = true
            }
            this.tableData.push(...data)
            if(flag){
              setTimeout(() => {
                this.loading = false
              },1000)
            }
            this.allcount = res.count;
            if(!flag){
              this.loading = false;
            }
            if (typeof row.currentPage != "undefined") {
              this.$nextTick(() => {
                this.curreuentPage = row.currentPage;
                this.count = row.count;
                // console.log(this.count)
                this.pageshow = true
              })
            }
          })
          .catch(err => {
            this.loading = false;
            console.log(err);
            this.$message.error("网络连接错误" + this.elTable_Options.getwayname);
          });
      },

      //循环获取数据定时器
      infinteScroll(){
        clearInterval(this.ScrollTime) //清除定时器
        this.ScrollTime = setInterval(() => {
          this.currentPage++
          this.gettabledata({}, 1)
        },75000)
      }
     

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。