element table自动滚动

html，关注点ref=“table”

 <el-table
        :data="showList"
        height="300"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#e6e6e6' }"
        ref="table"
      >
        <el-table-column
          :label="item.propName"
          :property="item.prop"
          v-if="tableft"
          v-for="item in tableColumnList"
          :key="item.prop"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[scope.column.property] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

js注意放到mounted里调用

tableScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData.clientHeight + divData.scrollTop + 1 >
          divData.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;

          // 滚动到最底部后执行刷新表格的方法;
          this.queryFn();
        }
      }, 50);
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.clientHeight = window.screenHeight;
        })();
      };
    },