element-plus el-table组件表格自动滚动 vue3

l_z__

已于 2023-07-19 14:10:48 修改

阅读量3.2k

点赞数 2

文章标签： vue.js javascript elementui

于 2023-07-19 14:05:49 首次发布

本文链接：https://blog.youkuaiyun.com/l_z__/article/details/131807339

版权

该代码段展示了如何在Vue项目中使用Element-Plus库创建一个告警列表，并实现表格内容的自动滚动效果。通过设置定时器和处理滚动位置，当数据超过一定数量时，表格会每隔一段时间自动向下滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div class="alarm-infoList">
    <div>告警列表</div>
    <el-table ref="reportTable" :data="tableData" style="width: 100%;height:200px;">
      <el-table-column v-for="item in tableHead" :prop="item.prop" :label="item.label" :key="item.prop"/>
    </el-table>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const reportTable = ref()
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 = reportTable.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]    // 设置每次滑动几行
    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>

element-plus版本：2.3.7
参考自：
https://blog.youkuaiyun.com/qq_37167086/article/details/125321867
https://blog.youkuaiyun.com/xiakexinLO/article/details/128476937