vue实现表格（table）的无缝滚动 vue-seamless-scroll（Ant Design Vue）

实现步骤

一、下载插件

npm i --s vue-seamless-scroll
yarn add vue-seamless-scroll

二、注册使使用

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

局部
import vueSeamless from 'vue-seamless-scroll'

三、结合Ant Design Vue 使用 table 无缝滚动

<template>
  <div class="table-scroll">
    <a-table
      class="hidden-tbody"
      :data-source="tableData"
      :pagination="false"
    >
      <a-table-column key="id" title="序号" >
        <template slot-scope="text, record, index">
          <span>{{ (index + 1) }}</span>
        </template>
      </a-table-column>
    </a-table>
    <vueSeamlessScroll :data="tableData" :class-option="defineScroll" class="auto-scorll-table">
      <a-table
        class="custom-table-2 hidden-thead"
        :data-source="tableData"
        :pagination="false">
        <a-table-column key="id" title="序号" >
          <template slot-scope="text, record, index">
            <span>{{ (index + 1) }}</span>
          </template>
        </a-table-column>
      </a-table>
    </vueseamlessscroll>
  </div>
</template>
<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
      components: {
        vueSeamlessScroll
      },
      computed: {
        defineScroll() {
          return {
            step: 0.1, // 数值越大速度滚动越快
            limitMoveNum: 3, // 开始无缝滚动的数据量
            hoverStop: true // 是否开启鼠标悬停stop
          }
        }
      },
      data() {
          return {
            tableData: []
          }
      },
      mounted() {
        for (var i = 0; i < 100; i++) {
            this.tableData.push(i)
        }
      }
  }
</script>
<style lang="less">
  .table-scroll {
        .ant-table {
            thead, tbody {
                tr {
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                }
            }
        }
        .hidden-tbody .ant-table {
            box-sizing: border-box;
            tbody { //隐藏上面表格的tbody
                display: block;
                height: 0;
                overflow: hidden;
            }
            .ant-table-placeholder {
                display: none;
            }
        }
        .auto-scorll-table {
            overflow: hidden;
            margin-top: 10px;
        }
        .hidden-thead .ant-table {
            border-top: none; //防止边框重叠
            thead { //隐藏下面表格的thead
                display: block;
                height: 0;
                overflow: hidden;
            }
        }
  }
</style>