ElementUI表格 el-table实现自动循环滚动

和风微凉2025-07-30 20:42

效果：

html 复制代码

<div class="">
    <el-table ref="xjwTable" :data="jrxjrwData" height="100%" border highlight-current-row @row-click="">
        <el-table-column prop="xjqy" label="巡检范围"></el-table-column>
        <el-table-column prop="xjry" label="状态" width="70"></el-table-column>
        <el-table-column prop="rwmc" label="任务名称" width="250"></el-table-column>
    </el-table>
</div>

JS：

javascript 复制代码

autoCycle() {
  //拿到相关元素
  const wrapper = this.$refs.xjwTable.bodyWrapper;
  this.timer = setInterval(() => {
  // 元素自增距离顶部1像素
  wrapper.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (wrapper.clientHeight + wrapper.scrollTop == wrapper.scrollHeight) {
          // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
          wrapper.scrollTop = wrapper.scrollTop - wrapper.scrollHeight/2
      }
  }, 50)
},