vue2使用vue-seamless-scroll封装列表组件

    <template>
        <div class="tableCom" ref="scrollContainer">
            <div class="tableHead">
                <div class="tableHeadItem" v-for="(item, index) in head" :key="index" :style="{ flex: item.flex }">{{ item.title
                }}
                </div>
            </div>
            <vueseamlessscroll :class-option="defaultOption" :data="list" class="tableBody">
                <div class="tableBody2" v-for="(item, index) in list" :key="index" @click="jumpTable(item)">
                    <div class="tableBody2Item" :style="{ flex: head[0].flex }">
                        <div class="index1" v-if="index == 0">
                            <img src="../../../assets/images/top11.png" alt="">
                        </div>
                        <div class="index1" v-else-if="index == 1">
                            <img src="../../../assets/images/top2.png" alt="">
                        </div>
                        <div class="index1" v-else-if="index == 2">
                            <img src="../../../assets/images/top3.png" alt="">
                        </div>
                        <div class="index1" v-else="">{{ index + 1 }}</div>
                    </div>
                    <div class="tableBody2Item" :style="{ flex: head[1].flex }">
                        <span class="num">{{ item.name }}</span>
                    </div>
                    <div class="tableBody2Item" :style="{ flex: head[2].flex }">
                        <span class="num">{{ item.value }}</span>
                    </div>
                </div>
            </vueseamlessscroll>
        </div>
    </template>

    <script>
    import vueSeamlessScroll from "vue-seamless-scroll";

    export default {
        name: "ScrollTable",
        components: { vueSeamlessScroll },
        computed: {
            defaultOption() {
                return {
                    step: 0.4, // 数值越大速度滚动越快
                    limitMoveNum: 6, // 开始无缝滚动的数据量 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)
                }
            },
        },
        props: {
            head: {
                type: Array,
                default() {
                    return [{
                        title: '序号',
                        flex: 0.3
                    }, {
                        title: '风险类型',
                        flex: 1
                    }, {
                        title: '数量',
                        flex: 0.4
                    }


                    ];
                }
            },
            list: {
                type: Array,
                default() {
                    return [];
                }
            },
        },
        data() {
            return {

            }
        },
        watch: {},
        mounted() {
            this.$nextTick(() => {
                this.scrollContainerHeight = this.$refs.scrollContainer.offsetHeight
            })
            window.addEventListener('resize', this.handleResize)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.handleResize)
        },
        methods: {
            handleResize() {
                this.scrollContainerHeight = this.$refs.scrollContainer.offsetHeight
            },
            // 左侧数据跳转
            jumpTable(row) {
                this.$router.push({
                    path: "/bank/Warning/riskList",
                    query: {
                        RiskId: row.id,
                    },
                });
            },
        }
    }
    </script>

    <style lang="scss" scoped>
    .tableCom {
        width: calc(100% - 0px);
        margin-left: 0px;
        position: relative;
        height: 100%;
        overflow: hidden;

        .tableHead {
            width: 100%;
            height: 39px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;

            .tableHeadItem {
                font-size: 15px;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;
                padding-left: 19px;
                flex: 1;
            }
        }

        .tableBody {
            position: relative;
            height: calc(100% - 40px);
            overflow: hidden;

            .tableBody2 {
                min-height: 35px;
                padding-top: 5px;
                padding-bottom: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;


                .tableBody2Item {
                    font-size: 15px;
                    font-weight: 400;
                    color: #ffffff;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: nowrap;
                    flex-direction: row;
                    padding-left: 18px;
                    flex: 1;

                    .num {
                        width: calc(100% - 1px);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }







            }






            .index1 {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;
                align-content: flex-start;
                width: 100%;
                font-size: 15px;
                font-weight: bold;
                color: #ffffff;
                margin-left: -15px;
                width: 60px;

                img {
                    width: 33px;
                    height: 33px;
                }
            }
        }
    }
    </style>
    
    
    
    窗口切换的时候还有一种方式
       sizeChange: true,

    <vue-seamless-scroll v-if="sizeChange" :data="tableList" class="seamless-warp scroll"
     :class-option="classOption">
    \<el-table cell-class-name="cell-class-name" v-loading="loading" :data="tableList" class="bottom"
    style="width: 100%" hover @row-click="jumpUser"> <el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center"></el-table-column> <el-table-column prop="ip" label="IP" show-overflow-tooltip align="center"></el-table-column> <el-table-column prop="workCode" label="工号" show-overflow-tooltip align="center"></el-table-column> </el-table> </vue-seamless-scroll>

    // 滚动列表窗口切换
    handleResize() {
    this.sizeChange = false;
    setTimeout(() => {
    this.\$nextTick(() => {
    this.sizeChange = true;
    });
    }, 500)
    },

    mounted() {
  
// 图表自适应
window.addEventListener("resize", () => {

  this.handleResize()


    },

        // 销毁eacharts
        beforeDestroy() {

        window\.removeEventListener('resize', this.handleResize)
        },