Element表格无限滚动

页面部分

<template>
                <el-table
                  :header-cell-style="rowClass"
                  :cell-style="cellStyle"
                  :data="courseRankingCensusData"
                  height="100%"
                  style="width: 90%"
                  highlight-current-row
                  ref="rolltable"
                  @mouseenter.native="stopScroll"
                  @mouseleave.native="startScroll"
                >
                  <el-table-column
                    type="index"
                    label="使用排名"
                    width="100"
                    style="color: white"
                  >
                    <template> </template>
                  </el-table-column>
                  <el-table-column label="课程名" width="100">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.mode }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="形式" width="100">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.name }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用率" width="100">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.ratio }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </template>

主要是用到ref="rolltable" 来去做效果

 这是:data="courseRankingCensusData" 里面 courseRankingCensusData接收的数据

这是methods里面的代码

 startScroll() {
      this.tableScroll(false);
      
    },
    stopScroll() {
      this.tableScroll(true);
      
    },

    tableScroll(stop) {
      if (stop) {
        clearInterval(this.rolltimer);
        return;
      }
      const table = this.$refs.rolltable;
      const divData = table.bodyWrapper;
      let index = 0;
      this.rolltimer = setInterval(() => {
        // console.log(table.tableData.length ,844);
        divData.scrollTop += 160;
        index += 100;
        // console.log(index,84888);
        // if (divData.clientHeight + divData.scrollTop + 1 >divData.scrollHeight) {
        //   if (table.tableData.length > this.courseRankingCensusDatalength) {
        //     divData.scrollTop = 0;
        //   }
        // }
        if (index >= 600) {
          divData.scrollTop = 0;
          index = 0;
          // console.log('重新');
          // this.tableScroll(false);
        }
      }, 1000);
    },

需要在data中定义 rolltimer 要不会报错

在mounted里面的代码

 this.tableScroll(false);

效果不太好但是可以用 不需要引入任何插件