element 实现表格滚动vue-seamless-scroll --save

npm install vue-seamless-scroll --save

main.js

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

<template>
  <div id="app">
    <div class="backround">
      <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
        <el-table :data="listData" border :show-header="status">
          <el-table-column prop="date" label="日期">
          </el-table-column>
          <el-table-column prop="title" label="标题">
          </el-table-column>
          <el-table-column prop="test" label="操作">
          </el-table-column>
        </el-table>
      </vue-seamless-scroll>
    </div>

  </div>
</template>
 
 
<script>
export default {
  data() {
    return {
      status: false,
      listData: [
        {
          'title': '测试模拟数据第一行',
          'date': '2015-xx-xx',
          'test': '测试',
          'test2': '测试2',
          'test3': '测试3'
        },
        {
          'title': '测试模拟数据第二行',
          'date': '2015-xx-xx',
          'test': '测试',
          'test2': '测试2',
          'test3': '测试3'
        },
        {
          'title': '测试模拟数据第三行',
          'date': '2015-xx-xx',
          'test': '测试',

        },
        {
          'title': '测试模拟数据第四行',
          'date': '2015-xx-xx',
        },
        {
          'title': '测试模拟数据第五行',
          'date': '2015-xx-xx',

        },
        {
          'title': '测试模拟数据第六行',
          'date': '2015-xx-xx',

        },
        {
          'title': '测试模拟数据第七行',
          'date': '2015-xx-xx',
        },
      ]
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },

  }
}
</script>
<style  scoped>
.backround {
  width: 100%;
  height: 500px;
  background-color: #409EFF;
}

::v-deep.el-table,
::v-deep.el-table__expanded-cell {
  background-color: transparent;

}

/* 表格内背景颜色 */
::v-deep.el-table th,
::v-deep.el-table tr,
::v-deep.el-table td {
  background-color: transparent;
  color: white
}

.seamless-warp {
  height: 500px;
  overflow: hidden;

}

::v-deep.el-table .cell {
  text-align: center;
}

 
.item {
  width: 33.3%;
  border-right: 2px solid gainsboro;
  text-align: center;
}
</style>

配置项：