el-table 表格自动滚动,滚动到底部请求下一页数据,当获取不到新数据时,从顶部开始滚动,不在获取数据。(鼠标移动到表格上停止滚动,移开继续滚动)

 template

<el-table ref="dailyRef" :data="tableData1" max-height="680px" class="table" :row-class-name="tableRowClassName" v-loading="templateLoading" element-loading-text="加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
          <el-table-column prop="plantName" label="企业名称" width="200"></el-table-column>
          <el-table-column label="排放量(tCO2)">
            <el-table-column prop="emCurDayVal" label="本日"></el-table-column>
            <el-table-column prop="emLastDayVal" label="同期"></el-table-column>
            <el-table-column prop="emCurMonthVal" label="本月"></el-table-column>
            <el-table-column prop="emLastMonthVal" label="同期"></el-table-column>
            <el-table-column prop="emCurYearVal" label="本年"></el-table-column>
            <el-table-column prop="emLastYearVal" label="同期"></el-table-column>
          </el-table-column>
          <el-table-column label="供电排放强度(tCO2/MWh)">
            <el-table-column prop="pemiCurDayVal" label="本日"></el-table-column>
            <el-table-column prop="pemiLastDayVal" label="同期"></el-table-column>
            <el-table-column prop="pemiCurMonthVal" label="本月"></el-table-column>
            <el-table-column prop="pemiLastMonthVal" label="同期"></el-table-column>
            <el-table-column prop="pemiCurYearVal" label="本年"></el-table-column>
            <el-table-column prop="pemiLastYearVal" label="同期"></el-table-column>
          </el-table-column>
          <el-table-column label="供热排放强度(tCO2/GJ)">
            <el-table-column prop="hemiCurDayVal" label="本日"></el-table-column>
            <el-table-column prop="hemiLastDayVal" label="同期"></el-table-column>
            <el-table-column prop="hemiCurMonthVal" label="本月"></el-table-column>
            <el-table-column prop="hemiLastMonthVal" label="同期"></el-table-column>
            <el-table-column prop="hemiCurYearVal" label="本年"></el-table-column>
            <el-table-column prop="hemiLastYearVal" label="同期"></el-table-column>
          </el-table-column>
        </el-table>

 script

methods: {
    async handleSearch() {
      this.templateLoading = true
      clearInterval(this.timeDailyRef)
      const data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }
      let res = await queryReportByRange({ searchParam: data })
      if (res.data.success) {
          if (res.data.data && res.data.data.length !== 0) {
            this.ribaoScroll = false
            res.data.data.map(item => {
              this.tableData1.push(item)
            })
          } else {
            this.ribaoScroll = true
          }
          this.dailyRefScroll()
      }
      this.templateLoading = false
    },
    // 日报滚动
    dailyRefScroll() {
      clearInterval(this.timeDailyRef)
      const table = this.$refs.dailyRef
      const divData = table.bodyWrapper
      // divData.scrollTop = 0
      this.addDailyRefScroll(divData)
      divData.onmouseover = () => {
        clearInterval(this.timeDailyRef)
      }
      divData.onmouseout = () => {
        this.addDailyRefScroll(divData)
      }
    },
    addDailyRefScroll(divData) {
      let scrollTop = divData.scrollTop
      this.timeDailyRef = setInterval(() => {
        scrollTop = divData.scrollTop
        divData.scrollTop += 2 // 当值不在变化的时候 说明滚动到最底部 divData.scrollTop 也不会在继续加了
        if (scrollTop == divData.scrollTop) { // 注意在el-table 里 表格滚动只能限制在最顶部和最底部之间滚动
          if (this.ribaoScroll) {
            scrollTop = 0
            divData.scrollTop = 0
          } else {
            if (this.flag == 1) {
              this.currentPage++
              this.handleSearch()
            }
          }
        }
      }, 100)
    },
}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值