element表格组件，内容自动滚动（并可设置）

最近项目有个需求，两个表格，定时自动切换，而且每个表格内容自动滚动，还要加个设置功能，可以设置两个表格之前自动切换的间隔时间，和滚动速度，大概效果如下


话不多说，直接上代码
主要的功能方法
autoRoll（）内容自动滚动的实现
autoChange（）两个表格之间自动切换的实现

<!--
 * @Description: 
 * @Author: lzp
 * @Date: 2021-04-06 15:58:13
 * @LastEditTime: 2021-04-08 14:30:46
 * @LastEditors: xxx
-->
<template>
  <div class="main">
    <div class="setbox">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" size="small" label-width="px" label-position="left">
          <el-col :span="23">
            <el-form-item label-width="110px" label="数据刷新（秒）">
              <el-input-number v-model="formData.refreshTime" placeholder="单位/s" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="滚动时间）">
              <el-input-number v-model="formData.rollTime" placeholder="单位/10ms" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="滚动间距">
              <el-input-number v-model="formData.rollPx" placeholder="单位/px" :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="applyForm" size="mini">应用</el-button>
              <el-button @click="resetForm" size="mini">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <div class="title1">
      <span>
        项目名称：
        <span class="xmmc">{{topInfo.项目名称}}</span>
      </span>
      <span>
        项目编码：
        <span>{{topInfo.项目编码}}</span>
      </span>
    </div>
    <div class="title2">
      <span class="title2_tip">
        组装:
        <span>{{topInfo.组装完成度}}%</span>
      </span>
      <span class="title2_tip">
        调试:
        <span>{{topInfo.调试完成度}}%</span>
      </span>
      <span class="title2_tip">
        项目负责人:
        <span>{{topInfo.项目负责人}}</span>
      </span>
      <span class="title2_tip">
        市场负责人:
        <span>{{topInfo.市场负责人}}</span>
      </span>
      <span class="title2_tip">
        出货日期:
        <span>{{topInfo.出货日期}}</span>
      </span>
      <span class="title2_tip">
        搬入日期:
        <span>{{topInfo.搬入日期}}</span>
      </span>
    </div>
    <el-table
      :data="jdrwInfo"
      height="100%"
      border
      style="width: 100%"
      v-show="autoPlay"
      ref="rw_table"
      @mouseenter.native="mouseEnter"
      @mouseleave.native="mouseLeave"
    >
      <el-table-column prop="JDRW_FZR_NAME" label="负责人"></el-table-column>
      <el-table-column prop="JDRW_RWMS" label="任务描述"></el-table-column>
      <el-table-column prop="JDRW_RWLX_NAME" label="项目阶段"></el-table-column>
      <el-table-column prop="JDRW_KSRQ" label="开始时间"></el-table-column>
      <el-table-column prop="JDRW_JSRQ" label="结束时间"></el-table-column>
      <el-table-column prop="JDRW_JD" label="进度"></el-table-column>
      <el-table-column prop="JDRW_WCQK" label="完成情况"></el-table-column>
    </el-table>
    <el-table
      :data="wtmxInfo"
      height="100%"
      border
      ref="wt_table"
      style="width: 100%"
      v-show="!autoPlay"
      @mouseenter.native="mouseEnter"
      @mouseleave.native="mouseLeave"
    >
      <el-table-column prop="WTFK_WTMS" label="问题描述"></el-table-column>
      <el-table-column prop="WTFK_XMDJLX_NAME" label="类型"></el-table-column>
      <el-table-column prop="WTFK_WTZT_NAME" label="状态"></el-table-column>
      <el-table-column prop="SY_PREAPPROVUSERNAMES" label="执行人"></el-table-column>
      <el-table-column prop="WTFK_JJR_NAME" label="解决人"></el-table-column>
      <el-table-column prop="WTFK_WTJJSJ" label="计划"></el-table-column>
      <el-table-column prop="SY_CREATEUSERNAME" label="登记人"></el-table-column>
      <el-table-column prop="SY_CREATETIME" label="登记"></el-table-column>
    </el-table>
  </div>
</template>

<script>
let rolltimer = '' // 自动滚动的定时任务
let changetimer = '' // 自动切换的定时任务
export default {
  name: 'index',
  data() {
    return {
      jdrwInfo: [],
      topInfo: {},
      wtmxInfo: [],
      // 默认的刷新，滚动时间，滚动间距
      refreshTime: 5,
      rollTime: 5,
      rollPx: 1,
      formData: {
        // 默认的设置
        refreshTime: 5,
        rollTime: 5,
        rollPx: 1,
      },
      autoPlay: true, // 两个表格是否自动切换，默认自动切换，鼠标移入表格停止自动切换
    }
  },
  created() {
    this.getXmInfo()
  },
  mounted() {
    this.autoRoll()
    this.autoChange()
  },
  methods: {
    // 获取数据
    getXmInfo() {
      const that = this
      JE.ajax({
        url: '/je/project/edms/xmgl/xm/getXmInfo',
        // params: { id: 'ST3He4WN6GGv87OGDSw' },
        params: { id: 'uu6MiZ9nFZoUAbTBrUA' },
        success: function (response) {
          var data = JE.getAjaxData(response)
          if (data.success) {
            that.jdrwInfo = data.obj.jdrwInfo
            that.topInfo = data.obj.topInfo[0]
            that.wtmxInfo = data.obj.wtmxInfo
          } else {
            JE.alert('获取数据失败！')
          }
        },
      })
    },
    // 应用自定义设置
    applyForm() {
      this.changeFunc()
      this.$message({
        message: '应用成功！',
        type: 'success',
      })
    },
    // 重置
    resetForm() {
      this.formData = {
        refreshTime: 5,
        rollTime: 5,
        rollPx: 1,
      }
      this.changeFunc()
      this.$message({
        message: '重置成功！',
        type: 'success',
      })
    },
    // 更新应用函数
    changeFunc() {
      this.refreshTime = this.formData.refreshTime
      this.rollTime = this.formData.rollTime
      this.rollPx = this.formData.rollPx
      this.autoRoll(true)
      this.autoChange(true)
      this.autoRoll()
      this.autoChange()
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(rolltimer)
        return
      }

      // 拿到表格挂载后的真实DOM
      const table = this.autoPlay ? this.$refs.rw_table : this.$refs.wt_table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      rolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, this.rollTime * 10)
    },
    // 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(changetimer)
        return
      }
      changetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay
        this.autoRoll(true) // 先清除定时器
        this.autoRoll() // 再开启定时器
      }, this.refreshTime * 1000)
    },
    // 鼠标进入
    mouseEnter(time) {
      // 鼠标进入停止滚动和切换的定时任务
      this.autoRoll(true)
      this.autoChange(true)
    },
    // 鼠标离开
    mouseLeave() {
      // 开启
      this.autoRoll()
      this.autoChange()
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  height: 100%;
  width: 80%;
  .setbox {
    width: 19%;
    position: absolute;
    right: 0px;
    top: 27px;
    background-color: #efefef;
  }
  .title1 {
    margin: 10px 15px;
    font-size: 16px;
    color: #000;
    .xmmc {
      margin-right: 40px;
      color: rgb(0, 176, 240);
    }
  }
  .title2 {
    margin-left: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #000;
    .title2_tip {
      margin-right: 20px;
    }
  }
}
</style>