element中el-table表格组件，内容自动滚动

小鱼儿心语：想见你的人，跋山涉水也总会来到你身边；不想见你的人，你走到他楼下他也懒得推开窗，真爱你的人，不怕麻烦也不忙。

先来看效果图吧：

element中el-table内容自动滚动.png

废话不多说，上代码：

表格部分：
                <el-table
                  :data="riskData"
                  :header-cell-style="headerbg"
                  :row-class-name="tableRowClassName"
                  height="70%"
                  ref="rw_table"
                  @mouseenter.native="mouseEnter"
                  @mouseleave.native="mouseLeave"
                >
                  <el-table-column
                    label="环境监测指标"
                    align="center"
                    prop="name1"
                    width="110"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="检测值(单位)"
                    align="center"
                    prop="name2"
                    width="200"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="传感状态"
                    align="center"
                    prop="name3"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="时间"
                    align="center"
                    prop="name4"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    label="实时曲线监测"
                    align="center"
                    prop="name5"
                    width="110"
                    show-overflow-tooltip
                  />
                </el-table>

------------------data部分：--------------------------
export default {
  data() {
      return {
          rolltimer: ''    // 自动滚动的定时任务，很重要，一定要定义在data中，否则clearInterval（）方法失效
      }
   }
}

------------------js部分：--------------------------
// 设置自动滚动
    autoRoll(stop) {
      const table = this.$refs.rw_table
      // 拿到表格中承载数据的div元素
      const divData = table.$refs.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      if (stop) {
        //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        window.clearInterval(this.rolltimer)
      } else {
        this.rolltimer = window.setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
            // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
            // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
          }
        }, 150) // 滚动速度
      }
    },
    // 鼠标进入
    mouseEnter() {
      // 鼠标进入停止滚动和切换的定时任务
      this.autoRoll(true)
    },
    // 鼠标离开
    mouseLeave() {
      // 开启
      this.autoRoll()
    },

直接复制就可以实现自动滚动效果啦，大家有什么问题可以私信留言哦~