滚动表格（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.speedif(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>