【vue3的el-table表格内容自动滚动效果】

vue3 el-table 表格内容自动滚动效果

直接贴代码,有需要自取

<template>
  <div>
    <el-table ref="tableRef" :data="tableData" height="250">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue'
const tableRef: Ref<HTMLElement | any> = ref(null) //表格实例
const tableData = ref<any[]>([]) //定义表格list
//表格测试数据
const getTableData = (): any => {
  let data = []
  for (var i = 0; i <= 50; i++) {
    data.push({
      date: i,
      name: `Tom${i}`,
      address: `地区${i}`
    })
  }
  return data
}

onMounted(() => {
  tableData.value = getTableData() //表格数据赋值
  scroll(tableRef.value.$refs.bodyWrapper) //设置滚动
})

const scroll = (tableBody: any) => {
  let isScroll = true //滚动
  const tableDom = tableBody.getElementsByClassName('el-scrollbar__wrap')[0]

  //鼠标放上去，停止滚动；移开，继续滚动
  tableDom.addEventListener('mouseover', () => {
    isScroll = false
  })
  tableDom.addEventListener('mouseout', () => {
    isScroll = true
  })

  setInterval(() => {
    if (isScroll) {
      tableDom.scrollTop += 3 //设置滚动速度
      if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
        tableDom.scrollTop = 0
      }
    }
  }, 100)
}
</script>

原文链接:https://blog.csdn.net/leftfist/article/details/127568900 如涉及侵权,请联系删除