<template>
	<div class="alarm-infoList">
    <div>告警列表</div>
    <el-table class="alarm-table" :data="tableData" style="width: 100%;height:200px;">
      <el-table-column v-for="item in tableHead" :prop="item.prop" :label="label" :key="item.prop"/>
    </el-table>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const tableHead = [
  {
    prop: 'index',
    label: '序号'
  },
  {
    prop: 'warnDevice',
    label: '告警设备'
  },
  {
    prop: 'warnInfo',
    label: '告警信息'
  },
  {
    prop: 'createTime',
    label: '告警时间'
  },
  {
    prop: 'state',
    label: '状态'
  }
]
const tableData = []
for (let i = 0; i < 12; i++) {
  tableData.push({
    index: i + 1,
    warnDevice: `设备`,
    warnInfo: '预警信息预警信息预警信息预警信息',
    handlePersonnel: 'admin',
    state: '未确认',
    createTime: '2022-5-31 09:30:00'
  })
}
let scrollHeight = 0
let currentScrollTop = 0
let maxScrollTop = 0
let timeInter = null
let timeInter2 = null
const tableNode = ref(null)
onMounted(() => {
  setTimeout(() => {
    updateList()
  }, 1000)
})

function updateList() {
  // 数据大于3条才会滑动
  if (tableData && tableData.length > 3) {
    // 获取滑动区域DOM 最新版本的element-plus节点有变化, 此版本为1.2.0-beta.3
    tableNode.value = document.querySelector('.alarm-table').querySelector('.el-table__body-wrapper')
    // 设置每次滑动几行
    scrollHeight = tableNode.value.querySelectorAll('tr')[0].offsetHeight * 3
    // 设置每次滑动的PX和滑动区域的高度
    tableNode.value.style.height = `${scrollHeight}px`
    // 获取最大滑动空间
    maxScrollTop = tableNode.value.firstElementChild.offsetHeight - scrollHeight
    // 开始
    restTimeInter()
  }
}

function restTimeInter() {
  // 清除所有定时器
  clearAllInterval()
  // 设置定时器
  timeInter = setInterval(setMultiLine, 4000)
}
function clearAllInterval() {
  clearInterval(timeInter)
  clearInterval(timeInter2)
}
function setScrollTop() {
  tableNode.value.scrollTop++
  if (tableNode.value.scrollTop >= currentScrollTop) { // 达到下次应该滑动的位置
    clearInterval(timeInter2)
  }
  if (tableNode.value.scrollTop > maxScrollTop) { // 滑到底了
    tableNode.value.scrollTop = maxScrollTop
    clearInterval(timeInter2)
  }
}
function setMultiLine() {
  // 下次应该滑到哪
  currentScrollTop = (tableNode.value.scrollTop || 0) + scrollHeight + currentScrollTop % scrollHeight
  if (tableNode.value.scrollTop >= maxScrollTop) { // 滑完了 重置
    currentScrollTop = 0
    tableNode.value.scrollTop = 0
    restTimeInter()
  } else {
    // 清除上一个定时器
    clearInterval(timeInter2)
    // 开始滑
    timeInter2 = setInterval(setScrollTop, 5)
  }
}
</script>
<style lang="less" scoped>
.alarm-infoList {
	padding: 15px;
	box-sizing: border-box;
	:deep(.el-table) {
		background-color: transparent;
    color: #fff;

		th {
			background-color: transparent;
		}
		tr {
			color: #fff;
			background-color: transparent;
			&.el-table__row--striped {
				td.el-table__cell {
					background-color: transparent;
				}
			}
			&:hover {
				td.el-table__cell {
					background-color: transparent;
				}
			}
		}
	}
}
</style>

PS：最新版本的element-plus table节点有变化，需要变换类名， 此版本为1.2.0-beta.3