表格自动滚动

<template>
    <div class="screen-box">
                              <div class="messageAlarm_table">
                        <div class="messageAlarm_table_head">
                            <p style="width: 20%">排名</p>
                            <p style="width: 30%">区域名称</p>
                            <p style="width: 30%">当期能耗(kWh)</p>
                            <p style="width: 20%">省份</p>
                        </div>
                        <vueSeamlessScroll :data="tableData1" class="messageAlarm_table_warp"
                            :class-option="classOption">
                            <div class="table_item" v-for="(item, index) in tableData1" :key="index">
                                <p style="width: 20%;display: flex;justify-content: center;">
                                    <span :class="item.pm > 3 ? 'pm2' : 'pm1'">{{ item.pm }}</span>
                                </p>
                                <p style="width: 30%">{{ item.regionName }}</p>
                                <p style="width: 30%">{{ item.energy }}</p>
                                <p style="width: 20%">{{ item.cname }}</p>
                            </div>
                        </vueSeamlessScroll>
                    </div>
                    
    </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
    name: "fiveBase",
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {
        }
    },
    watch: {},
  computed: {
        classOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量
                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 lang="scss" scoped>
.screen-box {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0.4rem;


}

            height: calc(100% - 0.8rem);

            .messageAlarm_table {
                width: 100%;
                height: calc(100% - 0.32rem);

                .messageAlarm_table_head {
                    width: 100%;
                    display: flex;
                    padding: 0.2rem 0;
                    font-size: 0.28rem;
                    align-items: center;
                    justify-content: space-between;
                    background: linear-gradient(180deg, rgba(14, 95, 255, 0.2) 0%, rgba(66, 129, 255, 0) 100%);
                    color: #333333FF;
                    font-weight: bold;

                    p {
                        margin: 0;
                        text-align: center;
                    }
                }

                .messageAlarm_table_warp {
                    overflow: hidden;
                    height: calc(100% - 0.7rem);

                    .table_item {
                        display: flex;
                        justify-content: space-between;

                        p {
                            margin: 0;
                            color: #333333FF;
                            padding: 0.1rem 0;
                            font-size: 0.24rem;
                            text-align: center;

                            //   超出隐藏
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;
                        }




                        // &:nth-child(even) {
                        //     background: rgba(33, 240, 240, 0.1);
                        // }
                    }
                }
            }
     

</style>