element UI 表格实现自动滚动及鼠标滑过停止滚动

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天。

因业务功能需要，要实现一个表格的自动滚动事件，同时要支持鼠标滑过滚动停止，鼠标离开继续滚动的效果。

实现原理很简单，但不常用，记录一下供需要的小伙伴学习，借鉴。

相关知识

ref, setInterval

实现过程

首先用 elementui 实现表格样式：

<el-table
  :data="tableData"
  ref="table"
  style="width: 100%"
  height="100%"
  @cell-mouse-enter="handleMouseEnter"
  @cell-mouse-leave="handleMouseLeave"
>
  <div v-for="(item, index) in tableHead" :key="index">
    <el-table-column
      v-if="index == 0"
      fixed
      :prop="item.name"
      :label="item.comment"
      width="100"
    >
    </el-table-column>
    <el-table-column
      v-else
      :prop="item.name"
      :label="item.comment"
      width="150"
    >
    </el-table-column>
  </div>
</el-table>

这里的数据我使用了循环的方式展现，其中重要的是关于鼠标滑过的两个事件，

• handleMouseEnter：鼠标进入事件
• handleMouseLeave：鼠标离开事件

JS 的关键事件代码，在 mounted 生命周期中调用滚动事件：

mounted() {
    this.toScroll()
},
methods:{
    data() {
        return {
          id: '', // 用来结束滚动的 timeid
          // 表头
          tableHead: [
            { name: 'factory', comment: '工厂' },
            { name: 'four', comment: '4月积分' },
            { name: 'five', comment: '5月积分' },
            { name: 'six', comment: '6月积分' },
            { name: 'qua', comment: '季度积分' },
            { name: 'sort', comment: '排名' }
          ],
          // 表格数据
          tableData: [{
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }, {
            factory: '保定',
            four: 2000,
            five: 1000,
            six: 3000,
            qua: 1500,
            sort: 1
          }],
        }
    },
    // 自动滚动事件
    toScroll(){
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.id = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)
    },
    // 鼠标进入事件
    handleMouseEnter(){
      clearInterval(this.id)
    },
    // 鼠标离开事件
    handleMouseLeave(){
      this.toScroll()
    }
}