el-table表格滚动

废话不多说 直接上代码！！！！

<template>
  <div style="width: 100%;height: 300px;">
    <el-table
      v-loading="loading"
      :data="tableData"
      :height="'100%'"
      ref="scroll_Table"
      @mouseenter.native="autoScroll(true)"
      @mouseleave.native="autoScroll(false)"
      >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小鼠',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小牛',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小兔',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-02',
            name: '王小龙',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小蛇',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小马',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小羊',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-02',
            name: '王小猴',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小鸡',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小狗',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小猪',
            address: '上海市普陀区金沙江路 1516 弄'
          },
        ],
        loading: false,
        scrolltimer: '', // 自动滚动的定时任务
      }
    },
    mounted () {
      const _that = this
      setTimeout(() => {
        _that.autoScroll()
      }, 500)
    },
    methods: {
      // 设置自动滚动
      autoScroll(stop) {
        const table = this.$refs.scroll_Table
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        if (stop) {
          //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
          window.clearInterval(this.scrolltimer)
        } else {
          this.scrolltimer = 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
            }
          }, 50) // 滚动速度
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>