table表格滚动

安装：

npm install vue-seamless-scroll --save

使用：

<template>
  <div class="scroll-table">
    <vue-seamless-scroll class="seamless-warp" :class-option="classOption" :data="list">
      <li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'scroll-table',
  data () {
    return {
      list: [
        {
          name: 1
        },
        {
          name: 2
        },
        {
          name: 3
        },
        {
          name: 4
        },
        {
          name: 5
        },
        {
          name: 6
        },
        {
          name: 7
        },
        {
          name: 8
        },
        {
          name: 9
        },
        {
          name: 10
        },
        {
          name: 11
        },
        {
          name: 12
        },
        {
          name: 13
        },
        {
          name: 14
        },
        {
          name: 15
        },
        {
          name: 16
        },
        {
          name: 17
        },
        {
          name: 18
        },
        {
          name: 19
        },
        {
          name: 20
        },
        {
          name: 21
        },
        {
          name: 22
        },
        {
          name: 23
        },
        {
          name: 24
        },
        {
          name: 25
        },
        {
          name: 26
        },
        {
          name: 27
        },
        {
          name: 28
        },
        {
          name: 29
        },
        {
          name: 30
        },
        {
          name: 31
        },
        {
          name: 32
        },
        {
          name: 33
        },
        {
          name: 34
        },
        {
          name: 35
        }
      ],
      classOption: {
        step: 0.1,
        limitMoveNum: 3
      }
    }
  },
  components: {
    vueSeamlessScroll
  }
}
</script>

<style lang="scss" scoped>
.scroll-table {
  width: 100%;
  height: 300px;
  overflow: hidden;
  .seamless-warp {
    height: 100%;
  }
    li {
      font-size: 14px;
      line-height: 2;
      list-style: none !important;
      text-align: center;
      background-color: pink;
      margin: 10px;
    }
}
</style>