滚动表格（vue版本）【已验证可正常运行】

演示图

注：以下代码来自于GPT4o：国内官方直连GPT4o

代码

<template>
    <div>
        <div class="alarmList-child" ref="alarmList" @mouseenter.stop="autoRoll(1)" @mouseleave.stop="autoRoll()">
            <div class="alarm-item" v-for="(item,index) in alarmList" :key="index">
                <div class="alarm-item-top">
                    <div>{{ item.name }}</div>
                </div>
                <div class="alarm-item-bot">
                    <div>{{ item.time }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            alarmList: [
                {
                    name: '报警1',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容1'
                },
                {
                    name: '报警2',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容2'
                },
                {
                    name: '报警3',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容3'
                },
                {
                    name: '报警44',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容4'
                },
                {
                    name: '报警5',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容5'
                },
                {
                    name: '报警6',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容6'
                },
                {
                    name: '报警7',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容7'
                },
                {
                    name: '报警8',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容8'
                },
                {
                    name: '报警9',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容9'
                },
                {
                    name: '报警10',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容10'
                },
                {
                    name: '报警11',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容11'
                },
                {
                    name: '报警12',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容12'
                }],
            timer: null,
            timerfir: null,
            scrollY: 20,//滚动距离
            speed: 0.5,//滚动速度

            }
    },
    mounted () {
        this.autoRoll()
    },
    destroyed () {
        clearInterval(this.timer)
        clearTimeout(this.timerfir)
    },
    methods: {
        autoRoll (flag) {
            if(flag) {
                clearInterval(this.timer)
                clearTimeout(this.timerfir)
                return;
            }
            let table = document.querySelector('.alarmList-child')
            this.timerfir = window.setTimeout(() => {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    //scrollHeight 获取元素内容高度(只读)
                    //scrollTop 获取或设置元素的垂直滚动条位置
                    //offsetHeight 获取元素的高度(只读)
                    this.scrollY += this.speed
                    if(this.scrollY >= table.scrollHeight - table.offsetHeight) {
                        this.scrollY = 0
                    }
                    table.scrollTop = this.scrollY
                }, 20)
            }, 1000)
        }
    }
}
</script>
<style lang="less">
.alarmList-child {
    margin-top: 200px;
    width: 800px;
    height: 200px;
    overflow: hidden;
    position: relative;
    .alarm-item {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .alarm-item-top {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .alarm-item-bot {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

</style>