使用vue-seamless-scroll实现el-table轮播

要实现el-table轮播效果,并且顶部th固定,鼠标移入暂停滑动

我看了好多方法，有人自己写的js，但是感觉太麻烦了，我找了半天找到了一个神器vue-seamless-scroll

插件在线演示文档

安装方法如下：

npm 安装

npm install vue-seamless-scroll --save

yarn 安装 （我用的这个）

yarn add vue-seamless-scroll

还有直接引入

<scriptsrc="vue-seamless-scroll.min.js"></script>

使用方法

// **main.js**// 
1.全局 install
import Vue from'vue'import scroll from'vue-seamless-scroll'
Vue.use(scroll)
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName:'scroll-seamless'})
// 2.单个.vue文件局部注册（推荐）
<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamlessScroll
      }
   }
</script>

<template>
    <div class="container">
        <el-table
            :data="tableData"
            border
            class="top"
            :header-cell-style="{background:'#eee',color:'#000000'}">
            style="width: 100%">
            <el-table-column
            fixed
            prop="company"
            label="企业">
            </el-table-column>
            <el-table-column
            prop="highrisk"
            label="腐蚀高风险">
            </el-table-column>
            <el-table-column
            prop="lowrisk"
            label="腐蚀中风险">
            </el-table-column>
        </el-table>
        <vue-seamless-scroll 
            :data="tableData" 
            :class-option="optionSingleHeight"
            class="seamless-warp">
            <el-table
                :data="tableData"
                border
                class="bottom"
                :header-cell-style="{background:'#eee',color:'#000000'}">
                style="width: 100%">
                <el-table-column
                fixed
                prop="company"
                label="企业">
                </el-table-column>
                <el-table-column
                prop="highrisk"
                label="腐蚀高风险">
                </el-table-column>
                <el-table-column
                prop="lowrisk"
                label="腐蚀中风险">
                </el-table-column>
            </el-table>
        </vue-seamless-scroll>
    </div>

</template>

import vueSeamlessScroll from'vue-seamless-scroll'

export default {
    name:'TableData',
    components:{
        vueSeamlessScroll//注册组件
    },
    data(){
        return{
            optionSingleHeight:{
                step:0.2,//数值越大滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
                hoverStop:true,//是否开启鼠标悬停stop
                direction:1,//0向下1向上2向左3向右
                openWatch:true,//开启数据实时监控刷新dom
                singleHeight:26,//单步运动挺值得高度(默认值0是无缝不停止的滚动)//竖着
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)//横着
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
        }
    }
}
<style lang="scss" scoped>
*{
    list-style: none;
}
ul,li,ol{
    padding: 0;
}
.seamless-warp {
    height: 100px;
    width: 100%;
    overflow: hidden;
}
::v-deep .table-style{
    .el-table__header-wrapper{
        display: none;
    }
}
::v-deep .top {
    .el-table__body-wrapper{
        display: none;
    }
}
::v-deep .bottom {
    .el-table__header-wrapper{
        display: none;
    }
}

</style>